title: javascript code stops one second after running
body: <p>The <code>eventlistener</code> 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 &quot;adsad&quot; 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?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let openbutton = document.getElementById("openbutton");
  let sectionbutton = document.getElementById("sectionbuttonid")
  let h1 = document.getElementById("h1")
  
  openbutton.addEventListener("click", () =&gt; {
  
    console.log("çalıştı");
    h1.innerText = "adsad";
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Rotating Nav&lt;/title&gt;
    &lt;link rel="stylesheet" href="./bootstrap.css"&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
  
  &lt;/head&gt;
  
  &lt;body class="bg-dark"&gt;
    &lt;section id="sectionbuttonid" class="asd"&gt;
      &lt;div class="container-fluid " id="buttoncontainer"&gt;
        &lt;div class="row position-relative" id="rowbuttunid"&gt;
          &lt;div id="colbuttunid" class="position-fixed border col-md-2 border d-flex justify-content-center pb-4 ps-5 align-items-end fs-3 bg-danger rounded-circle "&gt;
            &lt;a href=""&gt;&lt;i class=" border fa-solid fa-xmark me-5"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a href=""&gt;&lt;i id="openbutton" class="fa-solid fa-bars"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
    &lt;section id="sectioncontentid"&gt;
      &lt;div class="container-fluid bg-light" id="contentcontainer"&gt;
        &lt;div class="row"&gt;
          &lt;h1 id="h1" class=""&gt;Amazing Article&lt;/h1&gt;
          &lt;small&gt;Florin pop&lt;/small&gt;
          &lt;p&gt;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.&lt;/p&gt;
          &lt;h2 class="text-center"&gt;SKY&lt;/h2&gt;
          &lt;div class="text-center"&gt;
            &lt;img src="sky.jpg" alt="dog" class="img-fluid " style="max-height:30rem ;"&gt;
          &lt;/div&gt;
          &lt;p&gt;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.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
    &lt;section id="menuid"&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col"&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa-solid fa-house me-3"&gt;&lt;/i&gt;&lt;span&gt;home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="my-3 ps-3"&gt;&lt;a href="#"&gt;&lt;i class="fa-solid fa-user me-3 ps-2"&gt;&lt;/i&gt;&lt;span&gt;user&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="ps-5"&gt;&lt;a href="#"&gt;&lt;i class="fa-solid fa-envelope me-3"&gt;&lt;/i&gt;&lt;span&gt;mail&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;!-- &lt;div&gt;&lt;i class="fa-solid fa-house"&gt;&lt;/i&gt;&lt;span&gt;home&lt;/span&gt;&lt;/div&gt;
                          &lt;div&gt;&lt;i class="fa-solid fa-user"&gt;&lt;/i&gt;&lt;span&gt;user&lt;/span&gt;&lt;/div&gt;
                          &lt;div&gt;&lt;i class="fa-solid fa-envelope"&gt;&lt;/i&gt;&lt;span&gt;mail&lt;/span&gt;&lt;/div&gt; --&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  
  
    &lt;script src="./bootstrap.js"&gt;&lt;/script&gt;
    &lt;script src="/script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>