JS - querySelector(All)
revision: April 8, 2024
Content
HTML elements
top
a "h4" element
a "h5" element
a "div" element
an "a" element.
an "a" element with a span element inside.
A "p" element within a "div" element
A "p" element in a "div" element in a "h4" element
Click the button to set the background color of all h4, div and span elements.
Some elements
Click the button to change the background color of every p element where the parent is a div element
More elements
code:
<div id="eerst">
<h4>a "h4" element</h4>
<h5>a "h5" element</h5>
<div>a "div" element</div>
<a>an "a" element.</a><br>
<a>an "a" element with a <span style="color:brown;">span</span> element inside.</a>
<div><p>A "p" element within a "div" element</p></div>
<h4><div><p>A "p" element in a "div" element in a "h4" element</p></div></h4>
<h6 style="font-weight:normal">Click the button to set the background color of all h4, div and span elements.</h6>
<button onclick="someElements()">Some elements</button>
<h6 style="font-weight:normal">Click the button to change the background color of every p element where the parent is a
div element</h6>
<button onclick="moreElements2()">More elements</button>
</div>
<script>
function someElements() {
var ax = document.querySelectorAll("#eerst h4, #eerst div, #eerst span");
var i;
for (i = 0; i < ax.length; i++) {
ax[i].style.backgroundColor = "red";
}
}
function moreElements2() {
var bx = document.querySelectorAll("#eerst div > p");
var i;
for (i = 0; i < bx.length; i++) {
bx[i].style.backgroundColor = "skyblue";
}
}
</script>
class attribute
top
A heading with class="example"
A paragraph with class="example".
Click the button to add a background color to all elements with class="example".
Click-example
code:
<div>
<h3 class="example">A heading with class="example"</h3>
<p class="example">A paragraph with class="example".</p>
<p>Click the button to add a background color to all elements with class="example".</p>
<button onclick="myFunction()">Click-example</button>
</div>
<script>
function myFunction() {
var x, i;
x = document.querySelectorAll(".example");
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "turquoise";
}
}
</script>
A heading with class="english"
A paragraph with class="english".
A paragraph with class="nederlands".
A paragraph with class="english".
A paragraph with class="chinese".
A paragraph with class="nederlands".
A paragraph with class="english".
A paragraph with class="chinese".
Click the button to add a background color to all elements with the respective class.
Click-English
Click-Nederlands
Click-Chinese
code:
<div>
<h3 class="exam">A heading with class="english"</h3>
<p class="english">A paragraph with class="english".</p>
<p class="nederlands">A paragraph with class="nederlands".</p>
<p class="english">A paragraph with class="english".</p>
<p class="chinese">A paragraph with class="chinese".</p>
<p class="nederlands">A paragraph with class="nederlands".</p>
<p class="english">A paragraph with class="english".</p>
<p class="chinese">A paragraph with class="chinese".</p>
<p>Click the button to add a background color to all elements with the respective class.</p>
<button onclick="myLanguage()">Click-English</button>
<button onclick="myLanguage1()">Click-Nederlands</button>
<button onclick="myLanguage2()">Click-Chinese</button>
</div>
<script>
function myLanguage() {
var y, i;
y = document.querySelectorAll(".english");
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "burlywood";
}
}
function myLanguage1() {
var xy, i;
xy = document.querySelectorAll(".nederlands");
for (i = 0; i < xy.length; i++) {
xy[i].style.backgroundColor = "lightgreen";
}
}
function myLanguage2() {
var xx, i;
var xx = document.querySelectorAll(".chinese");
for (i = 0; i < xx.length; i++) {
xx[i].style.backgroundColor = "red";
}
}
</script>
Click the button here below to find out how many elements with class "example" there are in this section.
Total
code:
<div>
<p>Click the button here below to find out how many elements with class "example" there are in this section.</p>
<button onclick="totalExample()">Total</button>
<p id="demo"></p>
</div>
<script>
function totalExample() {
var xyz = document.querySelectorAll(".example");
document.getElementById("demo").innerHTML = 'number of elements with class "example" in this section is ' + xyz.length;
}
</script>
attributes
top
code:
<div>
<a href="https://www.lwitters.com">lwitters.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
<p>Click the button to add a red border to all links with a target attribute.</p>
<button onclick="setTarget()">Target</button>
</div>
<script>
function setTarget() {
var cx = document.querySelectorAll("a[target]");
var i;
for (i = 0; i < cx.length; i++) {
cx[i].style.border = "0.5vw solid red";
}
}
</script>
querySelector - selects first element
top
example one
querySelector's power is exceeded only by it's mystery.
querySelector's power is exceeded only by it's mystery.
It's not that mysterious, querySelector selects elements using the same rules as CSS selectors.
It's not that mysterious, querySelector selects elements using the same rules as CSS selectors.
code:
<div>
<p class="main" style="padding-left: 1vw;">querySelector's power is exceeded only by it's mystery.</p>
<p class="main" style="padding-left: 1vw;">querySelector's power is exceeded only by it's mystery.</p>
<div class="response" style="padding-left: 1vw;">It's not that mysterious, querySelector selects elements using the same rules as CSS selectors.</div>
<div class="response" style="padding-left: 1vw;">It's not that mysterious, querySelector selects elements using the same rules as CSS selectors.</div>
</div>
<script>
let main = document.querySelector(".main");
console.log(main.innerHTML.trim());
main.style.color = "blue";
let response = document.querySelector("#response");
console.log(response.innerHTML.trim());
response.style.color = "red";
</script>
example two
Original content
inside paragraph
inside span
inside paragraph
code:
<div class="spec">
<div class="need">
<h5>Original content</h5>
<p>inside paragraph
<span> inside span</span>
inside paragraph</p>
</div>
<div>
<h5>Output</h5>
<div id="output"></div>
</div>
</div>
<script>
const baseElement = document.querySelector(".need p");
document.getElementById("output").innerHTML = baseElement.querySelector("div span").innerHTML;
example three
code:
<div class="card">
<div class="hamburger-nav" id="hamburgerBtn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<style>
.card {border-radius: 3vw;background: darkgrey; box-shadow: 0.4vw 0.4vw 1vw #010b14, -0.6vw -0.6vw 1vw #01213a; max-width: 30vw; margin: 1vw 1vw; display: flex; justify-content: center;
height: 15vw; align-items: center;}
.hamburger-nav{cursor: pointer;}
.hamburger-nav > span {display: block; height: 0.4vw; width: 10vw; background-color: turquoise;}
.hamburger-nav > span:not(:last-child){margin-bottom: 1vw;}
.hamburger-nav > span{transform-origin: 2vw;transition: 300ms ease-in-out;}
.is-open > span:first-child {transform: rotate(45deg);}
.is-open > span:nth-child(2) {opacity: 0;}
.is-open > span:last-child {transform: rotate(-45deg);}
</style>
<script>
const hamburgerBtn = document.querySelector('#hamburgerBtn')
hamburgerBtn.addEventListener('click', function() {
if (hamburgerBtn.classList.contains('is-open')) {
hamburgerBtn.classList.remove('is-open')
} else { hamburgerBtn.classList.add('is-open')
}
})
</script>
querySelectorAll - returns a static nodelist of elements
example one
red fruits
Strawberries
Raspberries
Cherries
purple fruits
Blackberries
Plums
Grapes
code:
<div>
<h4>red fruits</h4>
<ul class="red">
<li>Strawberries</li>
<li>Raspberries</li>
<li>Cherries</li>
</ul>
<h4>purple fruits</h4>
<ul class="purple">
<li>Blackberries</li>
<li>Plums</li>
<li>Grapes</li>
</ul>
</div>
<style>
.red, .purple{display: flex; flex-flow: column wrap; font-size: 1vw; align-items:flex-start; justify-content: flex-start;}
</style>
<script>
let listItems = document.querySelectorAll("li");
for (let i=0; i < listItems.length; i++) {
listItems[i].innerHTML += " are yummy"
}
let purpleItems = document.querySelectorAll(".purple li");
for (let i=0; i < purpleItems.length; i++) {
purpleItems[i].innerHTML += "!!!"
}
// Console log the contents of the first items in each list
// Remember that querySelector returns only the FIRST match
let firstRed = document.querySelector(".red li");
console.log("contents of first red li:", firstRed.innerHTML);
let firstPurple = document.querySelector(".purple li");
console.log("contents of first purple li:", firstPurple.innerHTML);
</script>
example two
code:
<div>
<div id="fruitsalad"><span>fruit salad</span>
<ul>
<li class="fruit">apples</li>
<li class="fruit">oranges</li>
<li class="fruit">grapes</li>
<li class="fruit">melon</li>
</ul>
</div>
<div id="greensalad"><span>green salad</span>
<ul>
<li class="green">lettuce</li>
<li class="green">tomato</li>
<li class="green">onion</li>
<li class="green">cucumber</li>
</ul>
</div>
<input onclick="getFruit()" type="button" value="fruit salad ingredients" style="width: 11vw;">
<input onclick="getGreen()" type="button" value="green salad ingredients" style="width:11vw;">
<div id="inOut"></div>
</div>
<style>
.fruit, .green{display: flex; flex-flow: column wrap; font-size: 1vw; align-items:flex-start; justify-content: flex-start;}
</style>
<script>
function getFruit() {
var fruits = document.getElementById('fruitsalad').querySelectorAll('li.fruit');
var fruitList = "";
for (var i = 0; i < fruits.length; i++) {
fruitList = fruitList + (fruits[i].innerHTML+'' +", ");
}
inOut.innerHTML = fruitList;
}
function getGreen() {
var greens = document.getElementById('greensalad').querySelectorAll('li.green');
var greenList = "";
for (var i = 0; i < greens.length; i++) {
greenList = greenList + (greens[i].innerHTML + '' + ", ");
}
inOut.innerHTML = greenList;
}
</script>
querySelector - querySelectorAll - mixed usages
top
code:
<div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<button id="first" type="submit" class="ui grey button">First</button>
<button id="all" type="submit" class="ui brown button">All</button>
<button id="clear" type="submit" class="ui brown button">Clear</button>
</div>
<style>
.selected{background-color: aqua;}
.container{display: grid;grid-template-columns: 15vw 15vw 15vw 15vw 15vw;grid-template-rows: 5vw;grid-column-gap:0.5vw; margin-bottom: 1vw;}
.container>div{border:0.2vw solid darkcyan;}
button, input[type=button]{margin-left: 1vw; font-size: 1vw;background-color:lightgreen; color: red; width: 8vw; height: 2vw; cursor: pointer;}
</style>
<script>
document.getElementById("first").onclick = (e) => {
let tag = document.querySelector(".container div:first-child");
tag.className = "selected";
};
document.getElementById("all").onclick = (e) => {
let tags = document.querySelectorAll(".container div");
tags.forEach( tag => {
tag.className = "selected";
});
};
document.getElementById("clear").onclick = (e) => {
let tags = document.querySelectorAll(".container div");
tags.forEach( tag => {
tag.classList.remove("selected");
});
};
</script>
various loops using querySelector and querySelectorAll
top
example one
click on each button to see the result
image 1
image 2
image 3
image 4
for-loop
for-of
for-of-entries
for-of-values
for-of-keys
forEach
forEach_2
code:
<div>
<p>click on each button to see the result</p>
<div class="containerA" id="myContainerA">
<div class="image"><h4>image</h4></div>
<div class="image"><h4>image</h4></div>
<div class="image"><h4>image</h4></div>
<div class="image"><h4>image</h4></div>
<button id="btn1" type="button" onclick="getList()" value="for_loop">for-loop</button>
<div id="for_loop"></div>
<button id="btn2" type="button" onclick="getList1()" value="for_of">for-of</button>
<div id="for_of"></div>
<button id="btn3" type="button" onclick="getList2()" value="for_of_entries">for-of-entries</button>
<div id="for_of_entries"></div>
<button id="btn4" type="button" onclick="getList3()" value="for_of_values">for-of-values</button>
<div id="for_of_values"></div>
<button id="btn5" type="button" onclick="getList4()" value="for_of_keys">for-of-keys</button>
<div id="for_of_keys"></div>
<button id="btn6" type="button" onclick="getList5()" value="forEach">forEach</button>
<div id="forEach"></div>
<button id="btn7" type="button" onclick="getList6()" value="forEach_2">forEach_2</button>
<div id="forEach_2"></div>
</div>
</div>
<style>
.one #for_loop, .one #for_of, .one #for_of_entries, .one #for_of_values, .one #for_of_keys, .one #forEach, .one #forEach_2{display: flex; flex-flow: row;}
</style>
<script>
/** 1. For-loop **/
function getList(){
var images = document.getElementById('myContainerA').querySelectorAll(".image");
var imageList = "";
for (var i = 0; i < images.length; i++) {
imageList = imageList + (images[i].innerHTML+'');
}
for_loop.innerHTML = imageList;
}
/** 2. For..of**/
function getList1(){
var images = document.getElementById('myContainerA').querySelectorAll(".image");
var imageList = "";
for (const image of images) {
imageList = imageList + (image.innerHTML+'');
}
for_of.innerHTML = imageList;
}
/* 3. For..of entries, keys, values*/
function getList2(){
var images = document.getElementById('myContainerA').querySelectorAll(".image");
var imageList = "", i;
for (const image of images.entries()) {
imageList = imageList + (image.innerHTML + '');
};
// document.getElementById('for_of_entries').innerHTML = imageList;
for_of_entries.innerHTML = imageList;
}
// for_of.innerHTML = imageList;
function getList3(){
const images = document.getElementById('myContainerA').querySelectorAll(".image");
var imageList = "";
for (const image of images.values()) {
imageList = imageList + (image.innerHTML+'');
};
for_of_values.innerHTML = imageList;
}
function getList4(){
const images = document.querySelectorAll(".image");
var imageList = "";
for (const image of images.keys()) {
imageList = imageList + (image.innerHTML+'');
};
for_of_keys.innerHTML = imageList;
}
/** 4. forEach**/
function getList5(){
var images = document.querySelectorAll(".image");
var imageList = "";
images.forEach(image => {
imageList = imageList + (image.innerHTML+'');
});
forEach.innerHTML = imageList;
}
function getList6(){
var images = document.querySelectorAll(".image");
var imageList = "";
[...images].forEach(image => {
imageList = imageList + (image.innerHTML+'');
});
forEach_2.innerHTML = imageList;
}
</script>
example two
click in each group to see the result
"For .. " basic loop
Text 1
Text 2
Text 3
Text 4
Text 5
"For .. of" loop
Text 6
Text 7
Text 8
Text 9
Text 10
"Foreach" loop
Text 11
Text 12
Text 13
Text 14
Text 15
"Foreach" loop-01
Text 16
Text 17
Text 18
Text 19
Text 20
"Foreach" loop-02
Text 21
Text 22
Text 23
Text 24
Text 25
code:
<div class="spec">
<p>click in each group to see the result</p>
<div id="list">
<ul>
<li class="title">"For .. " basic loop</li>
<li class="text">Text 1</li>
<li class="text">Text 2</li>
<li class="text">Text 3</li>
<li class="text">Text 4</li>
<li class="text">Text 5</li>
</ul>
<ul>
<li class="title">"For .. of" loop</li>
<li class="text1">Text 6</li>
<li class="text1">Text 7</li>
<li class="text1">Text 8</li>
<li class="text1">Text 9</li>
<li class="text1">Text 10</li>
</ul>
<ul>
<li class="title">"Foreach" loop</li>
<li class="text2">Text 11</li>
<li class="text2">Text 12</li>
<li class="text2">Text 13</li>
<li class="text2">Text 14</li>
<li class="text2">Text 15</li>
</ul>
<ul>
<li class="title">"Foreach" loop-01<li>
<li class="text3">Text 16</li>
<li class="text3">Text 17</li>
<li class="text3">Text 18</li>
<li class="text3">Text 19</li>
<li class="text3">Text 20</li>
</ul>
<ul>
<li class="title">"Foreach" loop-02<li>
<li class="text4">Text 21</li>
<li class="text4">Text 22</li>
<li class="text4">Text 23</li>
<li class="text4">Text 24</li>
<li class="text4">Text 25</li>
</ul>
</div>
<div id="data">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
</div>
</div>
<style>
#list ul{display: block; background-color: crimson; width: 10vw; list-style: none;}
#list{display: flex; flex-flow: row nowrap; justify-content: space-evenly;}
.title{list-style: none; background-color:lightgreen;text-align: center;}
#data{display: flex; flex-flow: row nowrap; justify-content: space-evenly;}
#one, #two, #three, #four, #five{text-align: left; width:10vw; background-color: black; color: white; justify-content: space-around;} */
</style>
<script>
/** Method one: basic loop **/
const items = document.querySelectorAll(".text");
for (let i = 0; i < items.length; i++) {
items[i].addEventListener("click", function () {
document.getElementById('one').innerHTML = items[i].innerText;
});
}
/** Method two: for...of loop **/
const items1 = document.querySelectorAll(".text1");
for (const item1 of items1) {
item1.addEventListener("click", () => {
document.getElementById('two').innerHTML = item1.innerText;
});
}
/** Method three: forEach loop **/
const items2 = document.querySelectorAll(".text2");
items2.forEach((item2) => {
item2.addEventListener("click", () => {
document.getElementById('three').innerHTML = item2.innerText;
});
});
// /** Method three: forEach loop - 01 **/
const items3 = document.querySelectorAll(".text3");
[].forEach.call(items3, function (item3) {
item3.addEventListener("click", function () {
document.getElementById('four').innerHTML = item3.innerText;
});
});
// /** Method three: forEach loop - 02 **/
const items4 = document.querySelectorAll(".text4");
[...items4].forEach((item4 => {
item4.addEventListener("click", () => {
document.getElementById('five').innerHTML = item4.innerText;
});
}));
</script>
let's play solitaire
top
Show Rules
Rules to the game
There are 7 columns of cards
First column has 1 card, second has 2, third has 3, and so on
First card in each column is face up, rest are face down
Move cards to build 4 stacks of cards in ascending order
Start with aces and build up to kings
Move cards by dragging and dropping
code:
<main>
<button class="rules-btn">Show Rules</button>
<section class="rules-container">
<h4>Rules to the game</h4>
<ul>
<li>There are 7 columns of cards</li>
<li>First column has 1 card, second has 2, third has 3, and so on</li>
<li>First card in each column is face up, rest are face down</li>
<li>Move cards to build 4 stacks of cards in ascending order</li>
<li>Start with aces and build up to kings</li>
<li>Move cards by dragging and dropping</li>
</ul>
</section>
</main>
<style>
.rules-container {display: none;}
.rules-container.show {display: block; font-size: 1vw; width: 30vw; margin: 1vw auto;}
.rules-btn { font-size: 1.2rem; color: #fff; background-color: #8a2be2; border: none; border-radius: 1vw; padding: 0.3vw; cursor: pointer; display: block; margin: 0.5vw auto;}
.rules-btn:hover {background-color: #5a1d94;}
.game{display: inline-block; text-align: left;width: 60vw; font-size: 1vw;}
</style>
<script>
const rulesBtn = document.querySelector(".rules-btn");
const rulesContainer = document.querySelector(".rules-container");
rulesBtn.addEventListener("click", () => {
rulesContainer.classList.toggle("show");
rulesBtn.textContent = rulesContainer.classList.contains("show") ? "Hide Rules" : "Show Rules";
});
</script>
sports
top
Generate random background colors
Football
Basketball
Tennis
Golf
Swimming
code:
<div>
<button class="btn_alpha">Generate random background colors</button>
<ul class="sports-list">
<li>Football</li>
<li>Basketball</li>
<li>Tennis</li>
<li>Golf</li>
<li>Swimming</li>
</ul>
<div id="sports-output"></div>
</div>
<style>
ul {font-size: 1.3rem; list-style-type: none; width: 100px; margin: auto;}
li { margin-top: 1vw;}
.btn_alpha { font-size: 1.2rem; color: #fff; background-color: #8a2be2; border: none; border-radius: 15px; padding: 10px; cursor: pointer; display: block; margin: 10px auto;
width: 30vw; height: 4vw;padding: 1vw;}
.btn_alpha:hover {background-color: #5a1d94;}
</style>
<script>
const sportsList = document.querySelectorAll(".sports-list li");
const randomColorBtn = document.querySelector(".btn_alpha");
console.log(sportsList);
const lightColorsArr = [
"#FFDAB9", "#FFE4B5", "#FFFFE0", "#FAFAD2", "#F0FFF0", "#E0FFFF", "#AFEEEE", "#00CED1",
"#00BFFF", "#1E90FF", "#ADD8E6", "#7FFFD4", "#7CFC00", "#7FFF00", "#32CD32", "#ADFF2F",
"#FFFF00", "#FFD700", "#FFA500", "#FF6347",
];
function shuffleArray(arr) {
let currentIndex = arr.length;
let randomIndex;
while (currentIndex !== 0) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex--;
[arr[currentIndex], arr[randomIndex]] = [
arr[randomIndex],
arr[currentIndex],
];
}
return arr;
}
randomColorBtn.addEventListener("click", () => {
const shuffledColors = shuffleArray(lightColorsArr);
sportsList.forEach((list, index) => {
list.style.backgroundColor = shuffledColors[index];
});
});
</script>
simplifying event handlers
top
code:
<div class="spec grid3">
<div>
<section>
<div id="red" draggable="true"><span>R</span></div>
<div id="yellow" draggable="true"><span>Y</span></div>
<div id="green" draggable="true"><span>G</span></div>
</section>
<p id="dragged">Drag a box</p>
</div>
<div>
<section class="section1">
<div id="red1" draggable="true"><span>R</span></div>
<div id="yellow1" draggable="true"><span>Y</span></div>
<div id="green1" draggable="true"><span>G</span></div>
</section>
<p id="dragged1">Drag a box</p>
</div>
<div>
<section class="section2">
<div id="red2" draggable="true"><span>R</span></div>
<div id="yellow2" draggable="true"><span>Y</span></div>
<div id="green2" draggable="true"><span>G</span></div>
</section>
<p id="dragged2">Drag a box</p>
</div>
<div>
<section class="section3">
<div id="red3" draggable="true"><span>R</span></div>
<div id="yellow3" draggable="true"><span>Y</span></div>
<div id="green3" draggable="true"><span>G</span></div>
</section>
<p id="dragged3">Drag a box</p>
</div>
</div>
<style>
div[draggable] {width: 2em; height: 2em; line-height: 2em; margin: 1em; text-align: center; font-weight: bold; cursor: move;}
#red, #red1, #red2, #red3 {background: red;}
#yellow, #yellow1, #yellow2, #yellow3 {background: yellow;}
#green, #green1, #green2, #green3 {background: green;}
#dragged, #dragged1, #dragged2, #dragged3{ color: blue; font-size: 1.5vw;}
</style>
<script>
/*first example*/
document.querySelector('#red').addEventListener('dragstart', evt => {
document.querySelector('#dragged').textContent = 'Dragged red';
});
document.querySelector('#yellow').addEventListener('dragstart', evt => {
document.querySelector('#dragged').textContent = 'Dragged yellow';
});
document.querySelector('#green').addEventListener('dragstart', evt => {
document.querySelector('#dragged').textContent = 'Dragged green';
});
/* second example*/
function preview(color) {
document.querySelector('#dragged1').textContent = `Dragged ${color}`;
}
document.querySelector('#red1').addEventListener('dragstart', evt => preview('red1'));
document.querySelector('#yellow1').addEventListener('dragstart', evt => preview('yellow1'));
document.querySelector('#green1').addEventListener('dragstart', evt => preview('green1'));
/* third example*/
const preview_A = evt => {
const color_A = evt.currentTarget.id;
document.querySelector('#dragged2').textContent = `Dragged ${color_A}`;
};
document.querySelector('#red2').addEventListener('dragstart', preview_A);
document.querySelector('#yellow2').addEventListener('dragstart', preview_A);
document.querySelector('#green2').addEventListener('dragstart', preview_A);
/* fourth example*/
const preview_B = evt => {
const color_B = evt.target.id;
document.querySelector('#dragged3').textContent = `Dragged ${color_B}`;
};
document.querySelector('.section3').addEventListener('dragstart', preview_B);
</script>
code:
<div class="spec grid1">
<div>
<section class="section4">
<div id="red4" draggable="true"><span>R</span></div>
<div id="yellow4" draggable="true"><span>Y</span> </div>
<div id="green4" draggable="true"><span>G</span></div>
</section>
<p id="clicked">Clicked a box</p>
</div>
<div>
<section class="section5">
<div id="red5" draggable="true"><span>R</span></div>
<div id="yellow5" draggable="true"><span>Y</span> </div>
<div id="green5" draggable="true"><span>G</span></div>
</section>
<p id="clicked2">Clicked a box</p>
</div>
</div>
<style>
div[draggable] {width: 2em; height: 2em; line-height: 2em; margin: 1em; text-align: center; font-weight: bold; cursor: move;}
#red4, #red5 {background: red;}
#yellow4, #yellow5 {background: yellow;}
#green4, #green5 {background: green;}
#clicked, #clicked2{ color: blue; font-size: 1.5vw;}
</style>
<script>
/* first example */
const preview_C = evt => {
const color_C = evt.target.id;
document.querySelector('#clicked').textContent = `Clicked ${color_C}`;
};
document.querySelector('.section4').addEventListener('click', preview_C);
/* second example*/
const preview_D = evt => {
const element = evt.target.closest('div[draggable]');
if (element != null) {
const color_D = element.id;
document.querySelector('#clicked2').textContent = `Clicked ${color_D}`;
}
};
document.querySelector('.section5').addEventListener('click', preview_D);
</script>
interacting with lists
top
Add new button
Click a numbered button
Add new button
Click a numbered button
code:
<div class="spec grid1">
<div>
<div id="buttons-container"></div>
<button id="add">Add new button</button>
<p id="clicked3">Click a numbered button</p>
</div>
<div>
<div id="buttons-container1"></div>
<button id="add1">Add new button</button>
<p id="clicked4">Click a numbered button</p>
</div>
</div>
<script>
/* first example*/
let buttonCounter = 0;
document.querySelector('#add').addEventListener('click', evt => {
const newButton = document.createElement('button');
newButton.textContent = buttonCounter;
// Make a new event listener every time "Add new button" is clicked
newButton.addEventListener('click', evt => {
// When clicked, log the clicked button's number.
document.querySelector('#clicked3').textContent = `Clicked button #${newButton.textContent}`;
});
buttonCounter++;
const container = document.querySelector('#buttons-container');
container.appendChild(newButton);
});
/* second example */
let buttonCounter1 = 0;
const container1 = document.querySelector('#buttons-container1');
document.querySelector('#add1').addEventListener('click', evt => {
const newButton1 = document.createElement('button');
newButton1.dataset.number = buttonCounter1;
buttonCounter1++;
container1.appendChild(newButton1);
});
container1.addEventListener('click', evt => {
const clickedButton = evt.target.closest('button');
if (clickedButton != null) {
// When clicked, log the clicked button's number.
document.querySelector('#clicked4').textContent = `Clicked button #${clickedButton.dataset.number}`;
}
});
</script>
collect forms input
top
code:
<div>
<form>
<label>Name: <input name="name" type="text"/></label>
<label>Email: <input name="email" type="email"/></label>
<label>Password: <input name="password" type="password"/></label>
</form>
<p id="preview_alpha"></p>
</div>
<script>
let responses = {
name: '',
email: '',
password: ''
};
document.querySelector('input[name="name"]').addEventListener('change', evt => {
const inputElement = document.querySelector('input[name="name"]');
responses.name = inputElement.value;
document.querySelector('#preview_alpha').textContent = JSON.stringify(responses);
});
document.querySelector('input[name="email"]').addEventListener('change', evt => {
const inputElement = document.querySelector('input[name="email"]');
responses.email = inputElement.value;
document.querySelector('#preview_alpha').textContent = JSON.stringify(responses);
});
document.querySelector('input[name="password"]').addEventListener('change', evt => {
const inputElement = document.querySelector('input[name="password"]');
responses.password = inputElement.value;
document.querySelector('#preview_alpha').textContent = JSON.stringify(responses);
});
</script>