Difference between revisions of "DOM Shopping"

From ProgZoo
Jump to navigation Jump to search
 
(8 intermediate revisions by the same user not shown)
Line 2: Line 2:
==Multiply Quantity by Price==
==Multiply Quantity by Price==
<div class=qu data-width=300>
<div class=qu data-width=300>
*You can quantity
*You can change quantity
*Multiply the number by the price to get total cost
*Multiply the number by the price to get total cost
<pre class=test>
<pre class=test>
Line 31: Line 31:
</pre>
</pre>
</div>
</div>


==Sum Quantity by Price==
==Sum Quantity by Price==
Line 39: 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:'recalculate',method:"click"},
           {id:'adult',value:"2"},
           {id:'adult',value:"2"},
           {id:'adult',method:"change"},]}
           {id:'recalculate',method:"click"},]}
</pre>
</pre>
<pre class=usr>
<pre class=usr>
document.body.innerHTML = `
document.body.innerHTML = `
<div>Adult: Quantity: <select id=quantity value='1'>
<div>Adult (£10): <select id=adult>
              <option>1</option>
  <option>1</option><option>2</option>
              <option>2</option>
</select>
              </select>
</div>
</div>
<div>Child: Quantity: <select id=quantity value='1'>
<div>Child (£5): <select id=child>
              <option>1</option>
  <option>1</option><option>2</option>
              <option>2</option>
</select>
              </select>
</div>
</div>
<button id=recalculate>Recalculate</button>
<div>Total: <input id=total value='15' disabled></div>
<div>Total: <input id=total value='15' disabled></div>
`;
`;
document.querySelectorAll('select').forEach(()=>{
document.getElementById('recalculate').onclick = ()=>{
})
};
</pre>
</pre>


<pre class=ans>
<pre class=ans>
document.body.innerHTML = `
document.body.innerHTML = `
<div>Adult: Quantity: <select id=quantity value='1'>
<div>Adult (£10): <select id=adult>
               <option>1</option>
               <option>1</option>
               <option>2</option>
               <option>2</option>
               </select>
               </select>
</div>
</div>
<div>Child: Quantity: <select id=quantity value='1'>
<div>Child (£5): <select id=child>
              <option>1</option>
  <option>1</option><option>2</option>
              <option>2</option>
</select>
              </select>
</div>
</div>
<button id=recalculate>Recalculate</button>
<div>Total: <input id=total value='15' disabled></div>
<div>Total: <input id=total value='15' disabled></div>
`;
`;
document.querySelectorAll('select').forEach(()=>{
document.getElementById('recalculate').onclick = ()=>{
  document.getElementById('total').value =
    document.getElementById('total').value =
    parseInt(document.getElementById('adult').value) * 10 +
      parseInt(document.getElementById('adult').value) * 10 +
    parseInt(document.getElementById('child').value) * 5;
      parseInt(document.getElementById('child').value) * 5;
})
};
</pre>
</pre>
</div>
</div>

Latest revision as of 18:56, 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:'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;
};