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倒数计时器将在一分钟后停止
相关标签