欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

我& # 39；我正在努力自學classList.toggle函數.我可以& # 39；不要讓它將類傳遞給元素

CSS
張吉惟2年前8瀏覽0評論

我讓Bing AI給我寫了一個基本的切換按鈕，可以在光線模式和光線模式之間切換。黑暗模式。我把它分解成，我想，4個文件。一個HTML文件、一個編譯成CSS的SASS文件和一個Javascript文件。但是，按鈕沒有點擊或運行。

我希望在那里放一個console.log()來測試這個按鈕發生了什么，但是說實話，我不知道如何或者在哪里寫。因為我問了必應，它用了我還沒學過的概念。上面說代碼運行良好，但在我的任何瀏覽器上都沒有。當我添加類& quot黑暗模式& quot手動添加到正文和html標簽中，但是學習addEventListener & ampclasslist.toggle()的一個優點是，我可以使用一個按鈕將一個類切換到一個特定的元素中或從該元素中切換出來。

基本上，我想學習創建一個超級基本的黑暗模式，一個超級基本的HTML頁面。

body {
  background-color: rgba(255, 247, 174, 0.87);
  color: black;
}

body.dark-mode {
  background-color: rgb(62, 74, 236);
  color: white;
}

#darkToggle {
  width: 100px;
  height: 40px;
  border: none;
  border-radius: 20px;
  background-color: #2ab1ce;
  color: white;
  font-weight: bold;
}

#darkToggle.dark-mode {
  background-color: #ea4b3c;
  color: white;
  font-weight: bold;
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="../../src/style/css/dom.css">
  <script src="../../src/script/dom.js" defer />
</head>
<body>
  <h1>Dark Mode Toggle Button</h1>
  <button id="darkToggle">Dark mode</button>
</body>
</html>

// get the button element by id
let button = document.getElementById("darkToggle");

// add a click event listener to the button
button.addEventListener("click", function () {
  // toggle the dark-mode class on the body and button elements
  document.body.classList.toggle("dark-mode");
  button.classList.toggle("dark-mode");

  // check if the body element has the dark-mode class
  if (document.body.classList.contains("dark-mode")) {
    // change the button text to light mode
    button.textContent = "Light mode";
  } else {
    // change the button text to dark mode
    button.textContent = "Dark mode";
  }
});

這是Codepen的鏈接

它可以在Codepen.io上運行，但不能在本地的Firefox或Edge上運行。我發誓我所有的鏈接都是正確的。編輯:我現在不確定我的鏈接是否正確。

你把你的. js文件鏈接到。html文件？在CodePen上，它是自動鏈接的

<script src="./your-js-file.js" defer />

這個問題是因為你的腳本是在HTML之前加載的。將您的腳本移到底部，就在結束body標記之前& lt/body & gt；，或者嘗試在腳本中添加async，使其異步下載。

嘗試以下代碼:

<!DOCTYPE html>
<html>
<head>

<style>
body {
  background-color: rgba(255, 247, 174, 0.87);
  color: black;
}

body.dark-mode {
  background-color: rgb(62, 74, 236);
  color: white;
}

#darkToggle {
  width: 100px;
  height: 40px;
  border: none;
  border-radius: 20px;
  background-color: #2ab1ce;
  color: white;
  font-weight: bold;
}

#darkToggle.dark-mode {
  background-color: #ea4b3c;
  color: white;
  font-weight: bold;
}
</style>
</head>
<body>
 <h1>Dark Mode Toggle Button</h1>
  <button id="darkToggle">Dark mode</button>

</body>

<script>

    let button = document.getElementById("darkToggle");
    
    
    button.addEventListener
    // add a click event listener to the button
    button.addEventListener("click", function () {
        console.log(" ************* ");
      // toggle the dark-mode class on the body and button elements
      document.body.classList.toggle("dark-mode");
      button.classList.toggle("dark-mode");
    
      // check if the body element has the dark-mode class
      if (document.body.classList.contains("dark-mode")) {
        // change the button text to light mode
        button.textContent = "Light mode";
      } else {
        // change the button text to dark mode
        button.textContent = "Dark mode";
      }
    });
    
    </script>
</html>

我最初解決這個問題的方法是將我的腳本標簽移到我的html下面。然后我向Bing詢問了這個問題。它提到腳本標簽中的defer也阻止js在html被解析之前運行。我的問題是如何在我的腳本標簽中鏈接我的js。我的解決方案是這樣的:

& lt腳本src = & quot../../src/script/dom.js"延期& gt& lt/script & gt；

謝謝大家。