问javascript代码在运行后一秒停止
EN

Stack Overflow用户

提问于 2022-07-30 10:15:14

回答 1查看 49关注 0票数 0

我添加的eventlistener函数实际上可以工作，但是1秒后，网页返回到原来的状态，例如，它会更改h1标记的内容并使其"adsad“并打印与控制台相关的内容，但是1秒后，h1标记的内容返回到以前的状态，控制台中的表达式将被删除。有什么问题吗？

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>

javascript

addeventlistener

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-07-30 10:27:12

openbutton位于html中的<a></a>标记中，这是一个导致页面重新加载的超级The链接。您应该删除它或用<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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73174704

复制

相似问题

问javascript代码在运行后一秒停止
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript代码在运行后一秒停止EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript代码在运行后一秒停止
EN