DOM Common Logic: Difference between revisions

From ProgZoo
Jump to navigation Jump to search
← Older editNewer edit →
Line 104: Line 104:
     document.getElementById('total').value = '100';
     document.getElementById('total').value = '100';
}
}
</pre>
</div>
==Discount Code==
<div class=qu data-width=300>
If the user enters discount code <code>10PC</code>
<pre class=usr>
document.body.innerHTML = `
<div>Cost £<input disabled size=2 id=cost value=100><div>
<div>
  <label>Discount code
    <input id=discount />
  </label>
</div>
<div><button id=recalculate>Recalculate</button>
  Total £<input disabled id=total size=2 value=100>
</div>
`;
</pre>
<pre class=ans>
document.body.innerHTML = `
<div>Cost £<input disabled size=2 id=cost value=100><div>
<div>
  <label>Discount code
    <input id=discount />
  </label>
</div>
<div><button id=recalculate>Recalculate</button>
  Total £<input disabled id=total size=2 value=100>
</div>
`;
</pre>
</pre>
</div>
</div>

Revision as of 15:17, 3 October 2021





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

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





2) Age verification




You must be 18 to see the smutty image.



Input

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










3) Express Delivery




Pay £10 extra for express delivery



Input

 
Output
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').value = '110';
  else
    document.getElementById('total').value = '100';
}










4) Discount Code




If the user enters discount code 10PC



Input

 
Output
document.body.innerHTML = `
<div>Cost £<input disabled size=2 id=cost value=100><div>
<div>
  <label>Discount code
    <input id=discount />
  </label>
</div>
<div><button id=recalculate>Recalculate</button>
  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>Discount code
    <input id=discount />
  </label>
</div>
<div><button id=recalculate>Recalculate</button>
  Total £<input disabled id=total size=2 value=100>
</div>
`;





Retrieved from "https://progzoo.net/index.php?title=DOM_Common_Logic&oldid=864"