44 lines
1.4 KiB
JavaScript
44 lines
1.4 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
|
|
|
|
var buttone = document.getElementById("buttonone");
|
|
buttone.classList.add("textone"); //add class
|
|
|
|
buttone.classList.remove("mybutton"); //remove class
|
|
|
|
buttone = document.getElementById("buttontwo");
|
|
|
|
buttone.addEventListener("mouseover", event =>{
|
|
buttone.classList.toggle("texttwo"); //toggle will add if the class is not there and remove if it is there
|
|
});
|