DOM Controls that do things: Difference between revisions
Jump to navigation
Jump to search
Line 42: | Line 42: | ||
document.body.append(i.value); | document.body.append(i.value); | ||
document.body.append(i.value); | document.body.append(i.value); | ||
} | |||
document.body.append(i,b); | |||
</pre> | |||
</div> | |||
==Change Color== | |||
<div class=qu> | |||
<pre class=usr> | |||
let i = document.createElement('input'); | |||
i.value = 'green'; | |||
let b = document.createElement('button'); | |||
b.innerText = 'click me'; | |||
b.onclick = ()=>{ | |||
} | |||
document.body.append(i,b); | |||
</pre> | |||
<pre class=ans> | |||
let i = document.createElement('input'); | |||
i.value = 'green'; | |||
let b = document.createElement('button'); | |||
b.innerText = 'click me'; | |||
b.onclick = ()=>{ | |||
} | } | ||
document.body.append(i,b); | document.body.append(i,b); | ||
</pre> | </pre> | ||
</div> | </div> |
Revision as of 18:43, 4 September 2021
1) A button
When the user clicks the button the DOM gets changed.
Input
xxxxxxxxxx
let b = document.createElement('button');
b.innerText = 'click me';
b.onclick = ()=>{
document.body.append('Hello world');
}
document.body.append(b);
Output
let b = document.createElement('button'); b.innerText = 'click me'; b.onclick = ()=>{ document.body.append('Hello world'); } document.body.append(b);
let b = document.createElement('button'); b.innerText = 'click me'; b.onclick = ()=>{ document.body.append('Hello World!'); } document.body.append(b);
2) An input box and a button
The user can change the text that gets echoed.
Input
xxxxxxxxxx
let i = document.createElement('input');
i.value = 'New York ';
let b = document.createElement('button');
b.innerText = 'click me';
b.onclick = ()=>{
document.body.append(i.value);
}
document.body.append(i,b);
Output
let i = document.createElement('input'); i.value = 'New York '; let b = document.createElement('button'); b.innerText = 'click me'; b.onclick = ()=>{ document.body.append(i.value); } document.body.append(i,b);
let i = document.createElement('input'); i.value = 'New York '; let b = document.createElement('button'); b.innerText = 'click me'; b.onclick = ()=>{ document.body.append(i.value); document.body.append(i.value); } document.body.append(i,b);
3) Change Color
Input
xxxxxxxxxx
let i = document.createElement('input');
i.value = 'green';
let b = document.createElement('button');
b.innerText = 'click me';
b.onclick = ()=>{
}
document.body.append(i,b);
Output
let i = document.createElement('input'); i.value = 'green'; let b = document.createElement('button'); b.innerText = 'click me'; b.onclick = ()=>{ } document.body.append(i,b);
let i = document.createElement('input'); i.value = 'green'; let b = document.createElement('button'); b.innerText = 'click me'; b.onclick = ()=>{ } document.body.append(i,b);