Difference between revisions of "DOM Shopping"
Jump to navigation
Jump to search
(Created page with "<pre id='shellbody' data-qtp='clicky'></pre> ==Multiply Quantity by Price== <div class=qu data-width=300> *You can enter the number of widgets *Multiply the number by the pric...") |
|||
Line 13: | Line 13: | ||
<div>Quantity <input id=quantity value='1'></div> | <div>Quantity <input id=quantity value='1'></div> | ||
<div><button id=recalculate>Recalculate</button></div> | <div><button id=recalculate>Recalculate</button></div> | ||
<div>Quantity <input id=total value='50'></div> | <div>Quantity <input id=total value='50' disabled></div> | ||
`; | `; | ||
</pre> | </pre> | ||
<pre class=ans> | <pre class=ans> | ||
document.body.innerHTML = ` | |||
<div>Price <input id=price disabled value='50'></div> | |||
<div>Quantity <input id=quantity value='1'></div> | |||
<div><button id=recalculate>Recalculate</button></div> | |||
<div>Quantity <input id=total value='50' disabled></div> | |||
`; | |||
document.getElementById('recalculate').onclick = ()=>{ | |||
document.getElementById('total').value = | |||
parseInt(document.getElementById('price').value) * | |||
parseInt(document.getElementById('quantity').value); | |||
} | |||
</pre> | </pre> | ||
</div> | </div> |
Revision as of 18:16, 10 October 2021
Multiply Quantity by Price
- You can enter the number of widgets
- Multiply the number by the price to get total cost
{expr:[{id:'total',prop:"value"}], actions:[{id:'recalculate',method:"click"},{id:'qnty',value:"2"},{id:'recalculate',method:"click"},]}
document.body.innerHTML = ` <div>Price <input id=price disabled value='50'></div> <div>Quantity <input id=quantity value='1'></div> <div><button id=recalculate>Recalculate</button></div> <div>Quantity <input id=total value='50' disabled></div> `;
document.body.innerHTML = ` <div>Price <input id=price disabled value='50'></div> <div>Quantity <input id=quantity value='1'></div> <div><button id=recalculate>Recalculate</button></div> <div>Quantity <input id=total value='50' disabled></div> `; document.getElementById('recalculate').onclick = ()=>{ document.getElementById('total').value = parseInt(document.getElementById('price').value) * parseInt(document.getElementById('quantity').value); }