Javascript : set time out, get random number between , set time interval Javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>EVENT BUBBLING</title>
<style>
.container {
background-color: rgb(221, 129, 10);
border: 2px solid black;
padding: 10px;
margin: auto;
cursor: pointer;
}
.childcontainer {
background-color: rgb(10, 116, 21);
border: 2px solid black;
padding: 10px;
margin: auto;
cursor: pointer;
}
.child {
background-color: aliceblue;
border: 2px solid black;
padding: 10px;
margin: auto;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="childcontainer">
<div class="child">I am a child</div>
</div>
</div>
<script>
document
.querySelector(".child")
.addEventListener("click", function (event) {
event.stopPropagation();
alert("Child was clicked ");
});
document
.querySelector(".container")
.addEventListener("click", function (event) {
alert("container was clicked ");
});
document
.querySelector(".childcontainer")
.addEventListener("click", function (event) {
event.stopPropagation();
alert("childcontainer was clicked ");
});
// let a = setInterval(() => {
// let arr=["red","blue","green"];
// let random = Math.floor(Math.random() * arr.length);
// document.querySelector(".childcontainer").style.background=arr[random];
// }, 1000);
let a = setTimeout(() => {
let arr=["red","blue","green"];
let random = Math.floor(Math.random() * arr.length);
document.querySelector(".childcontainer").style.background=arr[random];
}, 1000);
</script>
</body>
</html>
Comments
Post a Comment