Difference between revisions of "DOM Common Logic"
Jump to navigation
Jump to search
Line 89: | Line 89: | ||
<pre class=ans> | <pre class=ans> | ||
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') = '110'; | |||
else | |||
document.getElementById('total') = '100'; | |||
} | |||
</pre> | </pre> | ||
</div> | </div> |
Revision as of 15:58, 3 October 2021
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') }
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') }
Age verification
You must be 18 to see the smutty image.
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'); }
Express Delivery
Pay £10 extra for express delivery
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') = '110'; else document.getElementById('total') = '100'; }