DOM Common Logic
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') }
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('Weeee...');
}
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('Weeee...'); }
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('Weeee...'); } document.getElementById('tall').onclick = ()=>{ document.getElementById('ride').removeAttribute('disabled') }
2) Age verification
You must be 18 to see the smutty image.
Input
xxxxxxxxxx
document.body.innerHTML = `
<label>I am over 18
<input type=checkbox id=adult>
</label>
<a id=link disabled href=https://www.imdb.com/title/tt0058331/mediaviewer/rm3665206785/>smutty</a>
`;
Output
document.body.innerHTML = ` <label>I am over 18 <input type=checkbox id=adult> </label> <a id=link disabled href=https://www.imdb.com/title/tt0058331/mediaviewer/rm3665206785/>smutty</a> `;
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('Weeee...'); } document.getElementById('tall').onclick = ()=>{ document.getElementById('ride').removeAttribute('disabled') }