Difference between revisions of "DOM Shopping"
Jump to navigation
Jump to search
Line 10: | Line 10: | ||
<pre class=usr> | <pre class=usr> | ||
document.body.innerHTML = ` | document.body.innerHTML = ` | ||
<div>Price <input id=price disabled value='50'></div> | <div>Price: <input id=price disabled value='50'></div> | ||
<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>Total: <input id=total value='50' disabled></div> | <div>Total: <input id=total value='50' disabled></div> | ||
Line 19: | Line 19: | ||
<pre class=ans> | <pre class=ans> | ||
document.body.innerHTML = ` | document.body.innerHTML = ` | ||
<div>Price <input id=price disabled value='50'></div> | <div>Price: <input id=price disabled value='50'></div> | ||
<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>Total: <input id=total value='50' disabled></div> | <div>Total: <input id=total value='50' disabled></div> |
Revision as of 18:24, 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:'quantity',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>Total: <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>Total: <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); }