Practice listening for and handling JavaScript DOM Events
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
stoplight-event-exercise/index.js

23 lines
819 B

document.addEventListener("DOMContentLoaded",()=>{
document.getElementById("controls").addEventListener("click",(clicked)=>{
var lightPrefix = clicked.target.id.replace("Button","");
var targetLight = document.getElementById(lightPrefix+"Light");
if (!targetLight.classList.contains(lightPrefix)) {
targetLight.classList.add(lightPrefix);
console.log(lightPrefix+" bulb on.")
} else {
targetLight.classList.remove(lightPrefix);
console.log(lightPrefix+" bulb off.")
}
})
var buttons = document.getElementsByClassName("button");
for (var i=0;i<buttons.length;i++) {
buttons[i].addEventListener("mouseenter",(e)=>{
console.log("Entered "+e.target.innerHTML+" button.")
})
buttons[i].addEventListener("mouseleave",(e)=>{
console.log("Left "+e.target.innerHTML+" button.")
})
}
})