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

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

xxxxxxxxxx

 

1

document.body.innerHTML = `

2

<label>I am over 1.2m

3

  <input type=checkbox id=tall>

4

</label>

5

<button id=ride disabled>Ride the rollercoaster</button>

6

`;

7

​

8

document.getElementById('ride').onclick = ()=>{

9

  document.body.append('Weeee...');

10

}

11

​

GoScore reset

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

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

xxxxxxxxxx

 

1

document.body.innerHTML = `

2

<label>I am over 18

3

  <input type=checkbox id=adult>

4

</label>

5

<button id=view disabled>View Image</button>

6

<img id=image width=200>

7

`;

8

document.getElementById('view').onclick=()=>{

9

  document.getElementById('image').src

10

    = 'https://progzoo.net/images/smut.jpg';

11

}

12

​

GoScore reset

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