I use Javascript to created 625 <div class="box"><div> then I want to add event listener for each box. The boxes is successfully created but the listener is not working. Here my full code, I really appreciate for all of your response. Thanks
<!DOCTYPE html>
<html>
<head>
<title>Number AI | Machine Learning Technologhy</title>
<style>
.box-container{
display: grid;
width: 300px;
height: 300px;
border: 1px solid blue;
grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
}
.box{
width:10px;
height:10px;
border: 1px solid black;
text-align: center;
}
</style>
<script type="text/javascript">
function initiateBox(){
for (let i = 0; i < 625; i++) {
let box = document.createElement("DIV");
box.classList.add("box");
document.querySelector('.box-container').appendChild(box);
}
};
window.onload = initiateBox;
</script>
</head>
<body>
<h2>Number AI</h2>
<div class="box-container"></div>
<script>
document.querySelectorAll(".box").forEach(box =>{
box.addEventListener("mouseover",function(){
box.style.backgroundColor = 'black';
});
});
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire