Difference between revisions of "DOM Controls that do things"

From ProgZoo
Jump to navigation Jump to search
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 = 'Andrew was here';
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 = 'Andrew was here';
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 19: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);











Retrieved from ‘https://progzoo.net/index.php?title=DOM_Controls_that_do_things&oldid=582’