stackoom
  简体   繁体   中英

javascript code stops one second after running

 原文  2022-07-30 10:15:14  8   1    javascript/ addeventlistener

Question

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? 

 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"; })
 * { 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; }
 <,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 class="bg-dark"> <section id="sectionbuttonid" class="asd"> <div class="container-fluid " id="buttoncontainer"> <div class="row position-relative" id="rowbuttunid"> <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 "> <a href=""><i class=" border fa-solid fa-xmark me-5"></i></a> <a href=""><i id="openbutton" class="fa-solid fa-bars"></i></a> </div> </div> </div> </section> <section id="sectioncontentid"> <div class="container-fluid bg-light" id="contentcontainer"> <div class="row"> <h1 id="h1" class="">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 class="text-center">SKY</h2> <div class="text-center"> <img src="sky.jpg" alt="dog" class="img-fluid " 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 class="container"> <div class="row"> <div class="col"> <ul> <li><a href="#"><i class="fa-solid fa-house me-3"></i><span>home</span></a></li> <li class="my-3 ps-3"><a href="#"><i class="fa-solid fa-user me-3 ps-2"></i><span>user</span></a></li> <li class="ps-5"><a href="#"><i class="fa-solid fa-envelope me-3"></i><span>mail</span></a></li> </ul> <!-- <div><i class="fa-solid fa-house"></i><span>home</span></div> <div><i class="fa-solid fa-user"></i><span>user</span></div> <div><i class="fa-solid fa-envelope"></i><span>mail</span></div> --> </div> </div> </div> </section> <script src="./bootstrap.js"></script> <script src="/script.js"></script> </body> </html>

1 answers

solution1
 0 ACCPTED  2022-07-30 10:27:12

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 class="bg-dark"> <section id="sectionbuttonid" class="asd"> <div class="container-fluid " id="buttoncontainer"> <div class="row position-relative" id="rowbuttunid"> <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 "> <a href=""><i class=" border fa-solid fa-xmark me-5"></i></a> <a id="openbutton" href=""><i class="fa-solid fa-bars"></i></a> </div> </div> </div> </section> <section id="sectioncontentid"> <div class="container-fluid bg-light" id="contentcontainer"> <div class="row"> <h1 id="h1" class="">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 class="text-center">SKY</h2> <div class="text-center"> <img src="sky.jpg" alt="dog" class="img-fluid " 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 class="container"> <div class="row"> <div class="col"> <ul> <li><a href="#"><i class="fa-solid fa-house me-3"></i><span>home</span></a></li> <li class="my-3 ps-3"><a href="#"><i class="fa-solid fa-user me-3 ps-2"></i><span>user</span></a></li> <li class="ps-5"><a href="#"><i class="fa-solid fa-envelope me-3"></i><span>mail</span></a></li> </ul> <!-- <div><i class="fa-solid fa-house"></i><span>home</span></div> <div><i class="fa-solid fa-user"></i><span>user</span></div> <div><i class="fa-solid fa-envelope"></i><span>mail</span></div> --> </div> </div> </div> </section> <script src="./bootstrap.js"></script> <script src="/script.js"></script> </body> </html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Javascript stops working after this code Javascript stops running after the page is polled After JQuery on() is called, embed javascript stops running Code stops running after class' constructor onChange function stops after one click, what code do I need to write so that it continues indefinitely? (Javascript) Electron app stops rendering while running Javascript code javascript 'setTimeout' function stops running after 6 minutes on Flask web server I have two simple javascript slideshows on one page but the second one stops the first one working Call JavaScript function after 1 second One Time JavaScript countdown timer with cookies stops after one minute
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM