-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtute57.html
50 lines (43 loc) · 1.85 KB
/
tute57.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Js Events</title>
<style>
#btn{
padding: 10px 14px;
background-color: red;
border: 2px solid black;
color: white;
border-radius: 8px;
cursor:pointer ;
}
</style>
</head>
<body>
<h3>This is a heading</h3>
<div>
<p id="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum quo ipsum, aspernatur quaerat totam sed voluptatem. Repellat voluptas animi impedit voluptatibus facilis, exercitationem at voluptate nulla iusto voluptatem rem debitis ipsum atque autem delectus amet. Ipsam harum eum possimus et similique quas rerum nisi voluptatem iste vero. Maxime iusto quaerat nulla vitae similique libero nesciunt corporis necessitatibus, illum qui facilis, quisquam quia adipisci magni eos quos minus omnis architecto sit! Expedita quia distinctio quae eum qui eveniet vero nesciunt veniam praesentium omnis ad, nemo consequatur at ratione incidunt adipisci ullam. Dignissimos eaque consectetur velit sint maxime cumque odio quisquam perferendis.</p>
</div>
<button id="btn" onclick="toggleHide">show/hide</button>
</body>
<!-- this is not working -->
<script>
let para= document.getElementById('para');
para.addEventListener('mouseover',function run(){
console.log('mouse inside')
});
function toggleHide(){
let btn=document.getElementById('btn');
para.style.display = none;
if(para.style.display !="none"){
para.style.display="none";
}
else{
para.style.display="block";
}
}
</script>
</html>