DOM Controls that do things

From ProgZoo
Jump to navigation Jump to search 




1) A button




When  the user clicks the button the DOM gets changed.



Input

 
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

 
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


An input element can be a text box.



  • In this example the text box is created and given a default value
    • 

  • The user can change that value.
    • 

  • The button text should get changed to the color of the moment. You can do that with the line:


 b.style.color = i.value;





Input

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





4) Do some maths




An input element can be a text box.



  • You can turn a string into a number with the parseInt function


Input

 
Output
let i = document.createElement('input');
i.value = 21;
let b = document.createElement('button');
b.innerText = 'click to double';
b.onclick = ()=>{
  let r = document.createElement('div');
  r.innerText = parseInt(i.value) + 1;
  document.body.append(r);
}
document.body.append(i,b);



let i = document.createElement('input');
i.value = 21;
let b = document.createElement('button');
b.innerText = 'click to double';
b.onclick = ()=>{
  let r = document.createElement('div');
  r.innerText = parseInt(i.value) * 2;
  document.body.append(r);
}
document.body.append(i,b);





5) Pick colours from a drop down


  • Set the b.style.background




Input

 
Output
let i = document.createElement('select');
i.append(...['red','blue','yellow']
  .map(c=>{
    let o = document.createElement('option');
    o.innerText = c;
    return o;
  }))
let b = document.createElement('button');
b.innerText = 'click me'
b.onclick = ()=>{
  //Your code goes here
}
document.body.append(i,b);



let i = document.createElement('select');
i.append(...['red','blue','yellow']
  .map(c=>{
    let o = document.createElement('option');
    o.innerText = c;
    return o;
  }))
let b = document.createElement('button');
b.innerText = 'click me'
b.onclick = ()=>{
  b.style.background = i.value;
}
document.body.append(i,b);











Retrieved from "https://progzoo.net/index.php?title=DOM_Controls_that_do_things&oldid=662"