DOM Shopping
Jump to navigation
Jump to search
Multiply Quantity by Price
- You can change quantity
- 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); }
Sum Quantity by Price
- Adult ticket costs £10
- Child tickets costs £5
{expr:[{id:'total',prop:"value"}], actions:[{id:'recalculate',method:"click"}, {id:'adult',value:"2"}, {id:'recalculate',method:"click"},]}
document.body.innerHTML = ` <div>Adult (£10): <select id=adult> <option>1</option><option>2</option> </select> </div> <div>Child (£5): <select id=child> <option>1</option><option>2</option> </select> </div> <button id=recalculate>Recalculate</button> <div>Total: <input id=total value='15' disabled></div> `; document.getElementById('recalculate').onclick = ()=>{ };
document.body.innerHTML = ` <div>Adult (£10): <select id=adult> <option>1</option> <option>2</option> </select> </div> <div>Child (£5): <select id=child> <option>1</option><option>2</option> </select> </div> <button id=recalculate>Recalculate</button> <div>Total: <input id=total value='15' disabled></div> `; document.getElementById('recalculate').onclick = ()=>{ document.getElementById('total').value = parseInt(document.getElementById('adult').value) * 10 + parseInt(document.getElementById('child').value) * 5; };