Difference between revisions of "DOM Common Logic"
Jump to navigation
Jump to search
Line 128: | Line 128: | ||
{id:'discount',prop:'value',value:'wrong'}, | {id:'discount',prop:'value',value:'wrong'}, | ||
{id:'recalculate',method:'click'}, | {id:'recalculate',method:'click'}, | ||
{id:'discount',prop:'value',value:'10PC' | {id:'discount',prop:'value',value:'10PC'}, | ||
{id:'recalculate',method:'click'}, | {id:'recalculate',method:'click'}, | ||
]} | |||
</pre> | </pre> | ||
Revision as of 20:37, 3 October 2021
1) A checkbox to enable a button
You must be 1.2m to to ride
- Add this code to allow the user to enable the button.
document.getElementById('tall').onclick = ()=>{ document.getElementById('ride').removeAttribute('disabled') }
{expr:[{id:'ride',prop:"disabled"}], actions:[{},{id:'tall',method:"click"}]}
Input
xxxxxxxxxx
document.body.innerHTML = `
<label>I am over 1.2m
<input type=checkbox id=tall>
</label>
<button id=ride disabled>Ride the rollercoaster</button>
`;
document.getElementById('ride').onclick = ()=>{
document.body.append('Whee...');
}
Output
document.body.innerHTML = ` <label>I am over 1.2m <input type=checkbox id=tall> </label> <button id=ride disabled>Ride the rollercoaster</button> `; document.getElementById('ride').onclick = ()=>{ document.body.append('Whee...'); }
document.body.innerHTML = ` <label>I am over 1.2m <input type=checkbox id=tall> </label> <button id=ride disabled>Ride the rollercoaster</button> `; document.getElementById('ride').onclick = ()=>{ document.body.append('Whee...'); } document.getElementById('tall').onclick = ()=>{ document.getElementById('ride').removeAttribute('disabled') }
2) Age verification
You must be 18 to see the smutty image.
{expr:[{id:'view',prop:"disabled"}], actions:[{},{id:'adult',method:"click"}]}
Input
xxxxxxxxxx
document.body.innerHTML = `
<label>I am over 18
<input type=checkbox id=adult>
</label>
<button id=view disabled>View Image</button>
<img id=image width=200>
`;
document.getElementById('view').onclick=()=>{
document.getElementById('image').src
= 'https://progzoo.net/images/smut.jpg';
}
Output
document.body.innerHTML = ` <label>I am over 18 <input type=checkbox id=adult> </label> <button id=view disabled>View Image</button> <img id=image width=200> `; document.getElementById('view').onclick=()=>{ document.getElementById('image').src = 'https://progzoo.net/images/smut.jpg'; }
document.body.innerHTML = ` <label>I am over 18 <input type=checkbox id=adult> </label> <button id=view disabled>View Image</button> <img id=image width=200> `; document.getElementById('view').onclick=()=>{ document.getElementById('image').src = 'https://progzoo.net/images/smut.jpg'; } document.getElementById('adult').onclick = ()=>{ document.getElementById('view').removeAttribute('disabled'); }
3) Express Delivery
Pay £10 extra for express delivery
{expr:[{id:'total',prop:'value'}], actions:[{},{id:'express',method:"click"}]}
Input
xxxxxxxxxx
document.body.innerHTML = `
<div>Cost £<input disabled size=2 id=cost value=100><div>
<div>
<label>Express delivery (£10)
<input id=express type=checkbox />
</label>
</div>
<div>Total £<input disabled id=total size=2 value=100></div>
`;
Output
document.body.innerHTML = ` <div>Cost £<input disabled size=2 id=cost value=100><div> <div> <label>Express delivery (£10) <input id=express type=checkbox /> </label> </div> <div>Total £<input disabled id=total size=2 value=100></div> `;
document.body.innerHTML = ` <div>Cost £<input disabled size=2 id=cost value=100><div> <div> <label>Express delivery (£10) <input id=express type=checkbox /> </label> </div> <div>Total £<input disabled id=total size=2 value=100></div> `; document.getElementById('express').onclick=()=>{ if (document.getElementById('express').checked) document.getElementById('total').value = '110'; else document.getElementById('total').value = '100'; }
4) Discount Code
If the user enters discount code 10PC
then the total is £90
{expr:[{id:'total',prop:'value'}], actions:[{}, {id:'recalculate',method:'click'}, {id:'discount',prop:'value',value:'wrong'}, {id:'recalculate',method:'click'}, {id:'discount',prop:'value',value:'10PC'}, {id:'recalculate',method:'click'}, ]}
Input
xxxxxxxxxx
document.body.innerHTML = `
<div>Cost £<input disabled size=2 id=cost value=100><div>
<div>
<label>Discount code
<input id=discount />
</label>
</div>
<div><button id=recalculate>Recalculate</button>
Total £<input disabled id=total size=2 value=100>
</div>
`;
Output
document.body.innerHTML = ` <div>Cost £<input disabled size=2 id=cost value=100><div> <div> <label>Discount code <input id=discount /> </label> </div> <div><button id=recalculate>Recalculate</button> Total £<input disabled id=total size=2 value=100> </div> `;
document.body.innerHTML = ` <div>Cost £<input disabled size=2 id=cost value=100><div> <div> <label>Discount code <input id=discount /> </label> </div> <div><button id=recalculate>Recalculate</button> Total £<input disabled id=total size=2 value=100> </div> `; document.getElementById('recalculate').onclick = ()=>{ if (document.getElementById('discount').value === '10PC'){ document.getElementById('total').value = '90'; }else{ document.getElementById('total').value = '100'; } }