DOM Controls that do things

1) A button

When the user clicks the button the DOM gets changed.

Input

let b = document.createElement('button'); b.innerText = 'click me'; b.onclick = ()=>{ document.body.append('Hello world'); } document.body.append(b);

xxxxxxxxxx

 

1

let b = document.createElement('button');

2

b.innerText = 'click me';

3

b.onclick = ()=>{

4

  document.body.append('Hello world');

5

}

6

document.body.append(b);

7

​

GoScore reset

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

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);

xxxxxxxxxx

 

1

let i = document.createElement('input');

2

i.value = 'New York ';

3

let b = document.createElement('button');

4

b.innerText = 'click me';

5

b.onclick = ()=>{

6

  document.body.append(i.value);

7

}

8

document.body.append(i,b);

9

​

GoScore reset

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

let i = document.createElement('input'); i.value = 'green'; let b = document.createElement('button'); b.innerText = 'click me'; b.onclick = ()=>{ } document.body.append(i,b);

xxxxxxxxxx

 

1

let i = document.createElement('input');

2

i.value = 'green';

3

let b = document.createElement('button');

4

b.innerText = 'click me';

5

b.onclick = ()=>{

6

}

7

document.body.append(i,b);

8

​

GoScore reset

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);