34 lines
1.1 KiB
JavaScript
34 lines
1.1 KiB
JavaScript
//NODELISTS
|
|
|
|
let buttons = document.querySelectorAll(".mybutton"); //NOTE!!! Node lists wont update the state of the DOM when it changes for example a new element is added, or an old removed
|
|
|
|
//Add new element
|
|
|
|
const newButton = document.createElement("button");
|
|
newButton.textContent = "Button S";
|
|
newButton.classList = "mybutton";
|
|
|
|
document.body.appendChild(newButton);
|
|
buttons = document.querySelectorAll(".mybutton");
|
|
|
|
|
|
buttons.forEach(button =>{
|
|
button.style.marginTop = `${Math.floor(Math.random() * 350)}px`;
|
|
});
|
|
|
|
let colors = ["red", "yellow", "green", "grey", "black", "violet"]
|
|
buttons.forEach(button =>{
|
|
button.addEventListener("click", event =>{
|
|
event.target.style.backgroundColor = `${colors[Math.floor(Math.random()*6)]}`;
|
|
});
|
|
button.addEventListener("mouseover", event =>{
|
|
event.target.style.border = `10px solid lightyellow`;
|
|
});
|
|
button.addEventListener("mouseout", event => {
|
|
event.target.style.border = `10px dashed white`;
|
|
});
|
|
});
|
|
|
|
//CLASSLISTS
|
|
//https://youtu.be/lfmg-EJ8gm4?si=-VAntMYmkAuzoruJ&t=35022
|