DOM Controls that do things - Revision history

Andr3w: /* Pick colours from a drop down */

2021-09-07T19:27:21Z

Pick colours from a drop down

@@ Line 111: / Line 111: @@
 <div class=qu>
 <pre class=usr>
 </pre>
 <pre class=ans>

2021-09-05T09:45:41Z

← Older revision		Revision as of 09:45, 5 September 2021
Line 77:		Line 77:

	==Do some maths==		==Do some maths==

	<div class=qu>		<div class=qu>
	An '''input''' element can be a text box.		An '''input''' element can be a text box.

2021-09-05T09:44:28Z

Undo revision 608 by Andr3w (talk)

← Older revision		Revision as of 09:44, 5 September 2021
Line 100:		Line 100:
	b.onclick = ()=>{		b.onclick = ()=>{
	let r = document.createElement('div');		let r = document.createElement('div');
	i.~~value~~ = parseInt(i.value) * 2;		r.innerText = parseInt(i.value) * 2;
			document.body.append(r);
	}		}
	document.body.append(i,b);		document.body.append(i,b);

2021-09-05T09:43:19Z

Do some maths

← Older revision		Revision as of 09:43, 5 September 2021
Line 100:		Line 100:
	b.onclick = ()=>{		b.onclick = ()=>{
	let r = document.createElement('div');		let r = document.createElement('div');
	r.~~innerText~~ = parseInt(i.value) * 2;		i.value = parseInt(i.value) * 2;
	~~document.body.append(r)~~;
	}		}
	document.body.append(i,b);		document.body.append(i,b);

2021-09-04T23:28:12Z

Pick colours from a drop down

← Older revision		Revision as of 23:28, 4 September 2021
Line 108:		Line 108:

	==Pick colours from a drop down==		==Pick colours from a drop down==
	*Set the <code>~~document.body~~.style.background</code>		*Set the <code>b.style.background</code>

	<div class=qu>		<div class=qu>
	<pre class=usr>		<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>
	<pre class=ans>		<pre class=ans>
Line 134:		Line 124:
	b.innerText = 'click me'		b.innerText = 'click me'
	b.onclick = ()=>{		b.onclick = ()=>{
	~~document.body~~.style.background = i.value;		b.style.background = i.value;
	}		}
	document.body.append(i,b);		document.body.append(i,b);
	</pre>		</pre>
	</div>		</div>

2021-09-04T23:17:36Z

Pick colours from a drop down

← Older revision		Revision as of 23:17, 4 September 2021
Line 124:		Line 124:
	</pre>		</pre>
	<pre class=ans>		<pre class=ans>
	let i = document.createElement('~~input~~');		let i = document.createElement('select');
	i.~~value~~ = 21;		i.append(...['red','blue','yellow']
			.map(c=>{
			let o = document.createElement('option');
			o.innerText = c;
			return o;
			}))
	let b = document.createElement('button');		let b = document.createElement('button');
	b.innerText = 'click ~~to double~~';		b.innerText = 'click me'
	b.onclick = ()=>{		b.onclick = ()=>{
	~~let r =~~ document.~~createElement('div');~~		document.body.style.background = i.value;
	r.~~innerText~~ = ~~parseInt(~~i.value~~) * 2;~~
	~~document.body.append(r)~~;
	}		}
	document.body.append(i,b);		document.body.append(i,b);
	</pre>		</pre>
	</div>		</div>

2021-09-04T23:13:43Z

Do some maths

@@ Line 77: / Line 77: @@
 ==Do some maths==
 An '''input''' element can be a text box.
 *You can turn a string into a number with the parseInt function
 <div class=qu>

2021-09-04T23:06:51Z

Do some maths

← Older revision		Revision as of 23:06, 4 September 2021
Line 88:		Line 88:
	b.onclick = ()=>{		b.onclick = ()=>{
	let r = document.createElement('div');		let r = document.createElement('div');
	r.innerText = parseInt(b.value) + 1;		r.innerText = parseInt(i.value) + 1;
	document.body.append(r);		document.body.append(r);
	}		}
Line 100:		Line 100:
	b.onclick = ()=>{		b.onclick = ()=>{
	let r = document.createElement('div');		let r = document.createElement('div');
	r.innerText = parseInt(b.value) * 2;		r.innerText = parseInt(i.value) * 2;
	document.body.append(r);		document.body.append(r);
	}		}

2021-09-04T23:06:09Z

Change Color

@@ Line 71: / Line 71: @@
 b.onclick = ()=>{
    b.style.color = i.value;
+}
 document.body.append(i,b);
 </pre>
 </div>

2021-09-04T18:50:31Z

Change Color

← Older revision		Revision as of 18:50, 4 September 2021
Line 48:		Line 48:

	==Change Color==		==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>		<div class=qu>
	<pre class=usr>		<pre class=usr>