Javascript Event Listener ➖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript Evennt listener</title>
</head>
<style>
#btn{
padding: 12px;
background-color: red;
color: white;
cursor: pointer;
border: 2px solid black;
box-shadow: 5px 5px blue;
}
</style>
<body>
<div class="container">
<h2>This is the eventlistener chapter</h2>
<p id="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit delectus quod eaque, dolore voluptatum consectetur? Accusantium cupiditate vitae harum labore? Et, blanditiis iste ratione alias fuga necessitatibus soluta quam laudantium! Corporis esse deleniti itaque neque nam quas quis ut, id maxime. Aperiam quibusdam quam veritatis mollitia, necessitatibus reiciendis accusamus. Tempore sequi perferendis quas rerum aut labore necessitatibus quasi id dolores, nesciunt corporis in atque, incidunt amet quae dicta, dolore facilis odio nobis. Distinctio, consequatur cumque sunt assumenda vero, tempora placeat aspernatur vitae iusto sequi corrupti eligendi minima veritatis dolore magnam quam. Et temporibus deserunt, cupiditate dolore sit beatae molestias. Iure sint vitae, corporis dolore numquam velit consequatur illo alias magnam reprehenderit vel perspiciatis, exercitationem incidunt esse quisquam beatae asperiores facere.</p>
<button id="btn" >Show/Hide</button>
<p id="date_p"></p>
</div>
<script>
let para = document.getElementById('para');
let btn = document.getElementById('btn');
para.addEventListener("mouseover",function run(){
console.log("Mouse is in")
});
para.addEventListener("mouseout",function run(){
console.log("Mouse isout")
});
btn.addEventListener("click",date_test);
function date_test(){
document.getElementById('date_p').innerHTML= Date();
}
window.addEventListener("resize", function(){
// document.getElementById("para").innerHTML = Math.random();
});
function togglehide(){
let btn = document.getElementById('btn');
if(para.style.display != 'none'){
para.style.display = 'none';
para.style.transition = "all 1s ease-in 0.1s";
}else{
para.style.display = 'block';
para.style.transition = "all 1s ease-in 0.1s";
}
}
</script>
</body>
</html>
Thanks you for commenting your questions. I will see question and respond you.