Difference between revisions of "DOM Shopping"

From ProgZoo
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>Quantity <input id=total value='50' disabled></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>Quantity <input id=total value='50' disabled></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);
}