The eventlistener function I added actually works, but after 1 second the web page returns to its original state, for example, it changes the content of the h1 tag and makes it "adsad" and prints the console related thing, but after 1 second, the content of the h1 tag returns to its previous state and the expression in the console is deleted. what could be the problem? HERE İS JS CODE
let openbutton=document.getElementById("openbutton");
let sectionbutton=document.getElementById("sectionbuttonid")
let h1=document.getElementById("h1")
openbutton.addEventListener("click",()=>{
console.log("çalıştı");
h1.innerText="adsad";
})
HTML CODE
<!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>Rotating Nav</title>
<link rel="stylesheet" href="./bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body >
<section id="sectionbuttonid" >
<div id="buttoncontainer">
<div id="rowbuttunid">
<div id="colbuttunid" >
<a href=""><i ></i></a>
<a href=""><i id="openbutton" ></i></a>
</div>
</div>
</div>
</section>
<section id="sectioncontentid">
<div id="contentcontainer">
<div >
<h1 id="h1" >Amazing Article</h1>
<small>Florin pop</small>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore itaque nulla consequatur unde non, facilis architecto veritatis! Aliquam, dolores beatae perspiciatis minus labore, eum est neque explicabo, adipisci qui a eveniet aut fuga suscipit unde in repellat earum at vero? Illo minima non aperiam sequi deleniti dolorum velit aliquam eveniet.Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore itaque nulla consequatur unde non, facilis architecto veritatis! Aliquam, dolores beatae perspiciatis minus labore, eum est neque explicabo, adipisci qui a eveniet aut fuga suscipit unde in repellat earum at vero? Illo minima non aperiam sequi deleniti dolorum velit aliquam eveniet.</p>
<h2 >SKY</h2>
<div >
<img src="sky.jpg" alt="dog" style="max-height:30rem ;">
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore itaque nulla consequatur unde non, facilis architecto veritatis! Aliquam, dolores beatae perspiciatis minus labore, eum est neque explicabo, adipisci qui a eveniet aut fuga suscipit unde in repellat earum at vero? Illo minima non aperiam sequi deleniti dolorum velit aliquam eveniet.Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore itaque nulla consequatur unde non, facilis architecto veritatis! Aliquam, dolores beatae perspiciatis minus labore, eum est neque explicabo, adipisci qui a eveniet aut fuga suscipit unde in repellat earum at vero? Illo minima non aperiam sequi deleniti dolorum velit aliquam eveniet.</p>
</div>
</div>
</section>
<section id="menuid">
<div >
<div >
<div >
<ul>
<li><a href="#"><i ></i><span>home</span></a></li>
<li ><a href="#"><i ></i><span>user</span></a></li>
<li ><a href="#"><i ></i><span>mail</span></a></li>
</ul>
<!-- <div><i ></i><span>home</span></div>
<div><i ></i><span>user</span></div>
<div><i ></i><span>mail</span></div> -->
</div>
</div>
</div>
</section>
<script src="./bootstrap.js"></script>
<script src="/script.js"></script>
</body>
</html>
CSS CODE
*{
overflow-x: hidden;
}
#colbuttunid{
height: 15rem;
width: 15rem;
top:-10rem;
left: -9rem;
}
#sectionbuttonid{
}
/* ----content--- */
#contentcontainer{
padding-top: 3rem;
padding-left: 4rem;
padding-right: 4rem;
height: 100%;
}
#sectioncontentid{
transform-origin: top left;
z-index: -12;
position: relative;
}
#sectioncontentid .row h1,h2{
overflow-y: hidden;
}
.donus{
transform: rotate(-20deg)
}
/* ----menu---- */
#menuid{
text-transform: uppercase;
position: fixed;
left: 0rem;
top: 30rem;
z-index: 5000;
}
#menuid li a{
text-decoration: none;
color: whitesmoke;
}
#menuid li a:hover{
color: red;
font-size: large;
}
CodePudding user response：
The openbutton is inside a <a></a> tag in your html, this is a hyperref link that causes the page to reload. You should remove it or replace it by a <button></button> tag.
Another thing you can do is place the id="openbutton" inside the <a> tag and add e.preventDefault() inside your event listener, which will prevent the link to reload the page.
let openbutton=document.getElementById("openbutton");
let sectionbutton=document.getElementById("sectionbuttonid")
let h1=document.getElementById("h1")
openbutton.addEventListener("click",(e)=>{
e.preventDefault();
console.log("çalıştı");
h1.innerText="adsad";
})*{
overflow-x: hidden;
}
#colbuttunid{
height: 15rem;
width: 15rem;
top:-10rem;
left: -9rem;
}
#sectionbuttonid{
}
/* ----content--- */
#contentcontainer{
padding-top: 3rem;
padding-left: 4rem;
padding-right: 4rem;
height: 100%;
}
#sectioncontentid{
transform-origin: top left;
z-index: -12;
position: relative;
}
#sectioncontentid .row h1,h2{
overflow-y: hidden;
}<!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>Rotating Nav</title>
<link rel="stylesheet" href="./bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body >
<section id="sectionbuttonid" >
<div id="buttoncontainer">
<div id="rowbuttunid">
<div id="colbuttunid" >
<a href=""><i ></i></a>
<a id="openbutton" href=""><i ></i></a>
</div>
</div>
</div>
</section>
<section id="sectioncontentid">
<div id="contentcontainer">
<div >
<h1 id="h1" >Amazing Article</h1>
<small>Florin pop</small>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore itaque nulla consequatur unde non, facilis architecto veritatis! Aliquam, dolores beatae perspiciatis minus labore, eum est neque explicabo, adipisci qui a eveniet aut fuga suscipit unde in repellat earum at vero? Illo minima non aperiam sequi deleniti dolorum velit aliquam eveniet.Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore itaque nulla consequatur unde non, facilis architecto veritatis! Aliquam, dolores beatae perspiciatis minus labore, eum est neque explicabo, adipisci qui a eveniet aut fuga suscipit unde in repellat earum at vero? Illo minima non aperiam sequi deleniti dolorum velit aliquam eveniet.</p>
<h2 >SKY</h2>
<div >
<img src="sky.jpg" alt="dog" style="max-height:30rem ;">
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore itaque nulla consequatur unde non, facilis architecto veritatis! Aliquam, dolores beatae perspiciatis minus labore, eum est neque explicabo, adipisci qui a eveniet aut fuga suscipit unde in repellat earum at vero? Illo minima non aperiam sequi deleniti dolorum velit aliquam eveniet.Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore itaque nulla consequatur unde non, facilis architecto veritatis! Aliquam, dolores beatae perspiciatis minus labore, eum est neque explicabo, adipisci qui a eveniet aut fuga suscipit unde in repellat earum at vero? Illo minima non aperiam sequi deleniti dolorum velit aliquam eveniet.</p>
</div>
</div>
</section>
<section id="menuid">
<div >
<div >
<div >
<ul>
<li><a href="#"><i ></i><span>home</span></a></li>
<li ><a href="#"><i ></i><span>user</span></a></li>
<li ><a href="#"><i ></i><span>mail</span></a></li>
</ul>
<!-- <div><i ></i><span>home</span></div>
<div><i ></i><span>user</span></div>
<div><i ></i><span>mail</span></div> -->
</div>
</div>
</div>
</section>
<script src="./bootstrap.js"></script>
<script src="/script.js"></script>
</body>
</html>