Difference between revisions of "DOM Controls that do things"

From ProgZoo
Jump to navigation Jump to search
 
(14 intermediate revisions by the same user not shown)
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.
<pre class=usr>
<pre class=usr>
let b = document.createElement('button');
let b = document.createElement('button');
Line 13: Line 15:
b.innerText = 'click me';
b.innerText = 'click me';
b.onclick = ()=>{
b.onclick = ()=>{
   document.body.append('Hello world');
   document.body.append('Hello World!');
}
}
document.body.append(b);
document.body.append(b);
</pre>
</div>
==An input box and a button==
<div class=qu>
The user can change the text that gets echoed.
<pre class=usr>
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);
</pre>
<pre class=ans>
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);
</pre>
</div>
==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;
<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 = ()=>{
  b.style.color = i.value;
}
document.body.append(i,b);
</pre>
</div>
==Do some maths==
<div class=qu>
An '''input''' element can be a text box.
*You can turn a string into a number with the parseInt function
<pre class=usr>
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);
</pre>
<pre class=ans>
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);
</pre>
</div>
==Pick colours from a drop down==
*Set the <code>b.style.background</code>
<div class=qu>
<pre class=usr>
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);
</pre>
<pre class=ans>
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);
</pre>
</pre>
</div>
</div>

Latest revision as of 19:27, 7 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

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

Do some maths

An input element can be a text box.

  • You can turn a string into a number with the parseInt function
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);

Pick colours from a drop down

  • Set the b.style.background
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);