DOM Common Logic

A checkbox to enable a button

You must be 1.2m to to ride

• The submit button starts with the property disabled
• The users action removes this property
• Add this code to allow the user to enable the button.

document.getElementById('tall').onclick = ()=>{
  document.getElementById('ride').removeAttribute('disabled')
}

{expr:[{id:'ride',prop:"disabled"}],
 actions:[{},{id:'tall',method:"click"}]}

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

Age verification

You must be 18 to see the smutty image.

{expr:[{id:'view',prop:"disabled"}],
 actions:[{},{id:'adult',method:"click"}]}

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

Express Delivery

Pay £10 extra for express delivery

• When the user selects the option, the price should change
• If the user unchecks the box it should go back to the original price
• You can read the state of the check box with:

 if (document.getElementById('express').checked)
   ...
 else
   ...

{expr:[{id:'total',prop:'value'}],
 actions:[{},{id:'express',method:"click"},{id:'express',method:"click"}]}

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

Discount Code

If the user enters discount code 10PC then the total is £90

{expr:[{id:'total',prop:'value'}],
 actions:[{},
   {id:'recalculate',method:'click'},
   {id:'discount',prop:'value',value:'wrong'},
   {id:'recalculate',method:'click'},
   {id:'discount',prop:'value',value:'10PC'},
   {id:'recalculate',method:'click'},
 ]}

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>
`;
document.getElementById('recalculate').onclick = ()=>{
  if (document.getElementById('discount').value === '10PC'){
    document.getElementById('total').value = '90';
  }else{
    document.getElementById('total').value = '100';
  }
}

Exclusive Options

• You can use radio buttons to present mutually exclusive options

{expr:[{id:'total',prop:'value'}],
 actions:[
  {id:'s',method:'click'},
  {id:'d',method:'click'},
  {id:'l',method:'click'},
 ]}

document.body.innerHTML = `
<label>Single, £100 <input name=n type=radio id=s></label><br>
<label>Double, £150 <input name=n type=radio id=d></label><br>
<label>Luxury, £200 <input name=n type=radio id=l></label><br>
Total £<input disabled id=total size=2>
`;
document.getElementById('s').onclick=()=>{
  document.getElementById('total').value=100;
}

document.body.innerHTML = `
<label>Single, £100 <input name=n type=radio id=s></label><br>
<label>Double, £150 <input name=n type=radio id=d></label><br>
<label>Luxury, £200 <input name=n type=radio id=l></label><br>
Total £<input disabled id=total size=2>
`;
document.getElementById('s').onclick=()=>{
  document.getElementById('total').value=100;
}
document.getElementById('d').onclick=()=>{
  document.getElementById('total').value=150;
}
document.getElementById('l').onclick=()=>{
  document.getElementById('total').value=200;
}