javascript 代碼運行一秒后停止
[英]javascript code stops one second after running
問題描述
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 ，h1標簽的內容恢復到之前的state，控制台中的表達式被刪除。 可能是什么問題呢？
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 個解決方案
解決方案1
0 已采納 2022-07-30 10:27:12
打開按鈕位於openbutton中的<a></a>標記內，這是一個導致頁面重新加載的超引用鏈接。 您應該刪除它或用<button></button>標記替換它。
您可以做的另一件事是將id="openbutton"放在<a>標記內，並在事件偵聽器中添加e.preventDefault() ，這將阻止鏈接重新加載頁面。
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>
onChange function 一鍵停止，我需要寫什么代碼才能無限期地繼續？ (Javascript)
[英]onChange function stops after one click, what code do I need to write so that it continues indefinitely? (Javascript)
javascript'setTimeout'功能在Flask Web服務器上6分鍾后停止運行
[英]javascript 'setTimeout' function stops running after 6 minutes on Flask web server
我在一頁上有兩個簡單的javascript幻燈片顯示，但是第二個則停止了第一個工作
[英]I have two simple javascript slideshows on one page but the second one stops the first one working
一分鍾的帶有cookie的JavaScript倒數計時器將在一分鍾后停止
[英]JavaScript countdown timer with cookies stops after one minute
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
此代碼后，Javascript停止工作
輪詢頁面后，Javascript停止運行
在調用JQuery on（）之后，嵌入式javascript停止運行
代碼在類的構造函數之后停止運行
onChange function 一鍵停止，我需要寫什么代碼才能無限期地繼續？ (Javascript)
電子應用程序在運行Javascript代碼時停止呈現
javascript'setTimeout'功能在Flask Web服務器上6分鍾后停止運行
我在一頁上有兩個簡單的javascript幻燈片顯示，但是第二個則停止了第一個工作
1 秒后調用 JavaScript 函數 一次
一分鍾的帶有cookie的JavaScript倒數計時器將在一分鍾后停止
相關標簽