Difference between revisions of "DOM Common Logic"

From ProgZoo
Jump to navigation Jump to search
Line 52: Line 52:
<pre class=ans>
<pre class=ans>
document.body.innerHTML = `
document.body.innerHTML = `
<label>I am over 1.2m
<label>I am over 18
   <input type=checkbox id=tall>
   <input type=checkbox id=adult>
</label>
</label>
<button id=ride disabled>Ride the rollercoaster</button>
<button id=view disabled>View Image</button>
<img id=image width=200>
`;
`;
 
document.getElementById('view').onclick=()=>{
document.getElementById('ride').onclick = ()=>{
   document.getElementById('image').src
   document.body.append('Weeee...');
    = 'https://progzoo.net/images/smut.jpg';
}
}
document.getElementById('tall').onclick = ()=>{
document.getElementById('adult').onclick = ()=>{
   document.getElementById('ride').removeAttribute('disabled')
   document.getElementById('view').removeAttribute('disabled');
}
}
</pre>
</pre>
</div>
</div>

Revision as of 15:19, 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('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')
}

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>
<a id=link disabled href=https://www.imdb.com/title/tt0058331/mediaviewer/rm3665206785/>smutty</a>
`;

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');
}