Difference between revisions of "DOM Shopping"
Jump to navigation
Jump to search
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> | <div>Total: <input id=total value='50' disabled></div> | ||
`; | `; | ||
</pre> | </pre> | ||
Line 22: | Line 22: | ||
<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> | <div>Total: <input id=total value='50' disabled></div> | ||
`; | `; | ||
document.getElementById('recalculate').onclick = ()=>{ | document.getElementById('recalculate').onclick = ()=>{ |
Revision as of 18:23, 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); }