Difference between revisions of "DOM Shopping"

From ProgZoo
Jump to navigation Jump to search
Line 38: Line 38:
<pre class=test>
<pre class=test>
{expr:[{id:'total',prop:"value"}],
{expr:[{id:'total',prop:"value"}],
  actions:[{id:'adult',method:"change"},
  actions:[{id:'adult',method:"onchange"},
           {id:'adult',value:"2"},
           {id:'adult',value:"2"},
           {id:'adult',method:"change"},]}
           {id:'adult',method:"onchange"},]}
</pre>
</pre>
<pre class=usr>
<pre class=usr>

Revision as of 18:46, 10 October 2021


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:'adult',method:"onchange"},
          {id:'adult',value:"2"},
          {id:'adult',method:"onchange"},]}
document.body.innerHTML = `
<div>Adult: Quantity: <select id=adult value=1>
               <option>1</option>
               <option>2</option>
               </select>
</div>
<div>Child: Quantity: <select id=child value=1>
               <option>1</option>
               <option>2</option>
               </select>
</div>
<div>Total: <input id=total value='15' disabled></div>
`;
document.querySelectorAll('select').forEach(()=>{
})
document.body.innerHTML = `
<div>Adult: Quantity: <select id=adult value='1'>
               <option>1</option>
               <option>2</option>
               </select>
</div>
<div>Child: Quantity: <select id=child value='1'>
               <option>1</option>
               <option>2</option>
               </select>
</div>
<div>Total: <input id=total value='15' disabled></div>
`;
document.querySelectorAll('select').forEach(s=>{
  s.onchange = ()=>{
    document.getElementById('total').value =
      parseInt(document.getElementById('adult').value) * 10 +
      parseInt(document.getElementById('child').value) * 5;
  };
})