Difference between revisions of "DOM Common Logic"

From ProgZoo
Jump to navigation Jump to search
Line 3: Line 3:
<div class=qu data-width=300>
<div class=qu data-width=300>
You must be 1.2m to to ride
You must be 1.2m to to ride
*Set the <code>type</code> of input <code>c</code> to "checkbox"
*Add this code to allow the user to enable the button.
*Add the onclick function to <code>c</code>
document.getElementById('tall').onclick = ()=>{
  document.getElementById('ride').removeAttribute('disabled')
}
<pre class=usr>
<pre class=usr>
let l = document.createElement('label');
document.body.innerHTML = `
l.innerHTML = 'Confirm I am at least 1.2m';
<label>I am over 1.2m
let c = document.createElement('input');
  <input type=checkbox id=tall>
l.append(c);
</label>
c.id = 'tall';
<button id=ride disabled>Ride the rollercoaster</button>
let b = document.createElement('button');
`;
b.innerText = 'Ride the Rollercoaster';
 
b.disabled = true;
document.getElementById('ride').onclick = ()=>{
b.onclick = ()=>{
   document.body.append('Weeee...');
   document.body.append('Weeee...');
}
}
document.body.append(l,b);
</pre>
</pre>


<pre class=ans>
<pre class=ans>
let l = document.createElement('label');
document.body.innerHTML = `
l.innerHTML = 'Confirm I am at least 1.2m';
<label>I am over 1.2m
let c = document.createElement('input');
  <input type=checkbox id=tall>
c.type = 'checkbox';
</label>
l.append(c);
<button id=ride disabled>Ride the rollercoaster</button>
c.id = 'tall';
`;
let b = document.createElement('button');
 
b.innerText = 'Ride the Rollercoaster';
document.getElementById('ride').onclick = ()=>{
b.disabled = true;
b.onclick = ()=>{
   document.body.append('Weeee...');
   document.body.append('Weeee...');
}
}
c.onclick = ()=>{
document.getElementById('tall').onclick = ()=>{
   if (c.checked){
   document.getElementById('ride').removeAttribute('disabled')
    b.removeAttribute('disabled');
  }else{
    b.addAttribute('disabled');
  }
}
}
document.body.append(l,b);
</pre>
</pre>
</div>
</div>

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











Retrieved from ‘https://progzoo.net/index.php?title=DOM_Common_Logic&oldid=854’