DOM Controls that do things: Difference between revisions
Jump to navigation
Jump to search
| Line 64: | Line 64: | ||
b.innerText = 'click me'; | b.innerText = 'click me'; | ||
b.onclick = ()=>{ | b.onclick = ()=>{ | ||
b.style.color = i.value; | |||
} | } | ||
document.body.append(i,b); | document.body.append(i,b); | ||
</pre> | </pre> | ||
</div> | </div> | ||
Revision as of 18:46, 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 = '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);
Change Color
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 = ()=>{
b.style.color = i.value;
}
document.body.append(i,b);