Difference between revisions of "DOM Controls that do things"

From ProgZoo
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


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 = ()=>{
}
document.body.append(i,b);