DOM Controls that do things: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
<pre id='shellbody' data-qtp='clicky'></pre> | <pre id='shellbody' data-qtp='clicky'></pre> | ||
==A button== | |||
<div class=qu> | <div class=qu> | ||
When the user clicks the button the DOM gets changed. | When the user clicks the button the DOM gets changed. | ||
| Line 20: | Line 21: | ||
</div> | </div> | ||
==An input box and a button== | |||
<div class=qu> | <div class=qu> | ||
The user can change the text that gets echoed. | The user can change the text that gets echoed. | ||
<pre class=usr> | <pre class=usr> | ||
let i = document.createElement('input'); | let i = document.createElement('input'); | ||
i.value = ' | i.value = 'Say it twice'; | ||
let b = document.createElement('button'); | let b = document.createElement('button'); | ||
b.innerText = 'click me'; | b.innerText = 'click me'; | ||
| Line 34: | Line 36: | ||
<pre class=ans> | <pre class=ans> | ||
let i = document.createElement('input'); | let i = document.createElement('input'); | ||
i.value = ' | i.value = 'Say it twice'; | ||
let b = document.createElement('button'); | let b = document.createElement('button'); | ||
b.innerText = 'click me'; | b.innerText = 'click me'; | ||
b.onclick = ()=>{ | b.onclick = ()=>{ | ||
document.body.append(i.value); | |||
document.body.append(i.value); | document.body.append(i.value); | ||
} | } | ||
Revision as of 18:38, 4 September 2021
A button
When the user clicks the button the DOM gets changed.
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);
An input box and a button
The user can change the text that gets echoed.
let i = document.createElement('input');
i.value = 'Say it twice';
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 = 'Say it twice';
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);