DOM Common Logic: Difference between revisions
Jump to navigation
Jump to search
Line 2: | Line 2: | ||
==A button== | ==A button== | ||
<div class=qu data-width=300> | <div class=qu data-width=300> | ||
You must be | You must be 1.2m to to ride | ||
*Set the <code>type</code> of input <code>c</code> to "checkbox" | |||
*Add the onclick function to <code>c</code> | |||
<pre class=usr> | <pre class=usr> | ||
let l = document.createElement('label'); | let l = document.createElement('label'); | ||
l.innerHTML = 'Confirm I am at least 1. | l.innerHTML = 'Confirm I am at least 1.2m'; | ||
let c = document.createElement('input'); | let c = document.createElement('input'); | ||
l.append(c); | l.append(c); | ||
Line 15: | Line 17: | ||
document.body.append('Weeee...'); | document.body.append('Weeee...'); | ||
} | } | ||
document.body.append(l,b; | document.body.append(l,b); | ||
</pre> | </pre> | ||
<pre class=ans> | <pre class=ans> | ||
let l = document.createElement('label'); | let l = document.createElement('label'); | ||
l.innerHTML = 'Confirm I am at least 1. | l.innerHTML = 'Confirm I am at least 1.2m'; | ||
let c = document.createElement('input'); | let c = document.createElement('input'); | ||
c.type = 'checkbox'; | c.type = 'checkbox'; |
Revision as of 13:29, 3 October 2021
1) A button
You must be 1.2m to to ride
- Set the
type
of inputc
to "checkbox" - Add the onclick function to
c
Input
x
let l = document.createElement('label');
l.innerHTML = 'Confirm I am at least 1.2m';
let c = document.createElement('input');
l.append(c);
c.id = 'tall';
let b = document.createElement('button');
b.innerText = 'Ride the Rollercoaster';
b.disabled = true;
b.onclick = ()=>{
document.body.append('Weeee...');
}
document.body.append(l,b);
Output
let l = document.createElement('label'); l.innerHTML = 'Confirm I am at least 1.2m'; let c = document.createElement('input'); l.append(c); c.id = 'tall'; let b = document.createElement('button'); b.innerText = 'Ride the Rollercoaster'; b.disabled = true; b.onclick = ()=>{ document.body.append('Weeee...'); } document.body.append(l,b);
let l = document.createElement('label'); l.innerHTML = 'Confirm I am at least 1.2m'; let c = document.createElement('input'); c.type = 'checkbox'; l.append(c); c.id = 'tall'; let b = document.createElement('button'); b.innerText = 'Ride the Rollercoaster'; b.disabled = true; b.onclick = ()=>{ document.body.append('Weeee...'); } c.onclick = ()=>{ if (c.checked){ b.removeAttribute('disabled'); }else{ b.addAttribute('disabled'); } } document.body.append(l,b);