revision:
A "p" element within a "div" element
A "p" element in a "div" element in a "h4" element
<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>
A paragraph with class="example".
Click the button to add a background color to all elements with class="example".
<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 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.
<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.
<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>
Click the button to add a red border to all links with a target attribute.
<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's power is exceeded only by it's mystery.
querySelector's power is exceeded only by it's mystery.
<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>
inside paragraph inside span inside paragraph
<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;
<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>
<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>
<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>
<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: 10vw 10vw 10vw 10vw;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>
click on each button to see the result
<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>
click in each group to see the result
<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>
<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>
<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>
Drag a box
Drag a box
Drag a box
Drag a box
<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>
Clicked a box
Clicked a box
<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>
Click a numbered button
Click a numbered button
<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>
<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>