第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

在 HTML 中使用 JavaScript 單擊時(shí)如何切換按鈕文本

在 HTML 中使用 JavaScript 單擊時(shí)如何切換按鈕文本

蕪湖不蕪 2023-06-09 14:49:55
我正在學(xué)習(xí) JavaScript 的基礎(chǔ)知識(shí)，似乎遇到了困難，只是找不到解決單擊時(shí)如何更改按鈕文本的答案。因此，我的 JavaScript 代碼運(yùn)行到單擊 html 中的按鈕時(shí)的位置，然后網(wǎng)站的背景顏色在白天和黑夜之間切換（就模式而言）。但是我試圖切換按鈕中的文本以在單擊時(shí)更改。因此，當(dāng)背景顏色處于白天模式時(shí)，按鈕會(huì)顯示“夜間模式”，然后單擊后，我希望按鈕文本切換到“白天模式”以轉(zhuǎn)換回原始狀態(tài)。對(duì)你的幫助表示感謝??！HTML:<!DOCTYPE html><html dir="ltr">  <head>    <meta charset="utf-8">    <link rel="stylesheet" href="style.css">    <title>Button Shifter</title>  </head>  <body>    <h1>COLOR SHIFTER: Day/Night Mode</h1>    <p>Click the button to see some magic! Toggle between Day and Night mode! Give it a try!</p>    <br><br><br><br>    <button onclick="toggleTheme()" id="myButton" >Dark Mode</button>    <script src="Javascript.js"></script>  </body></html>腳本：function toggleTheme() {  document.body.classList.toggle('dark-mode');  element.classList.toggle("dark-mode");  var btn = document.getElementById("myButton");    if (btn.value == "Night Mode"){    btn.value = "Day Mode";  }else {    btn.value = "Night Mode";}
查看完整描述

4 回答

?
元芳怎么了

TA貢獻(xiàn)1798條經(jīng)驗(yàn) 獲得超7個(gè)贊

實(shí)際上你的代碼中有一些錯(cuò)別字和錯(cuò)誤，這不僅僅是關(guān)于 innerHTML。檢查片段。


document.getElementById("myButton").addEventListener("click", function (e) {

  document.body.classList.toggle('dark-mode');

  // element.classList.toggle("dark-mode");

  if (e.target.textContent === "Dark Mode") {

    e.target.textContent = "Day Mode";

  } else {

    e.target.textContent = "Dark Mode";

  }

});

<body>

  <h1>COLOR SHIFTER: Day/Night Mode</h1>


  <p>Click the button to see some magic! Toggle between Day and Night mode! Give it a try!</p>

  <br><br><br><br>


  <button id="myButton">Dark Mode</button>

</body>


查看完整回答
反對(duì) 回復(fù) 2023-06-09
?
冉冉說(shuō)

TA貢獻(xiàn)1877條經(jīng)驗(yàn) 獲得超1個(gè)贊

使用 innerHTML 設(shè)置/獲取按鈕文本。另外，如果你想輕松調(diào)試你的JS，你可以使用瀏覽器調(diào)試工具（F12->控制臺(tái)）。


   <!DOCTYPE html>

    <html dir="ltr">

      <head>

        <meta charset="utf-8" />

        <link rel="stylesheet" href="style.css" />

        <title>Button Shifter</title>

        <style>

          .dark-mode {

            background-color: black;

          }

          .whiteText {

            color: white;

          }

        </style>

      </head>

      <body>

        <div id="heading">

          <h1 class="paraText1">COLOR SHIFTER: Day/Night Mode</h1>

    

          <p class="paraText">

            Click the button to see some magic! Toggle between Day and Night mode!

            Give it a try!

          </p>

        </div>

        <br /><br /><br /><br />

    

        <button onclick="toggleTheme()" id="myButton">Dark Mode</button>

      </body>

    

      <script>

        function toggleTheme() {

          document.body.classList.toggle("dark-mode");

          document.getElementById("heading").classList.toggle("whiteText");

          var btn = document.getElementById("myButton");

    

          if (btn.innerHTML == "Night Mode") {

            btn.innerHTML = "Day Mode";

          } else {

            btn.innerHTML = "Night Mode";

          }

        }

      </script>

    </html>


查看完整回答
反對(duì) 回復(fù) 2023-06-09
?
一只斗牛犬

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超2個(gè)贊

const nightText = "Night Mode";

const dayText = "Day Mode";


function toggleTheme(button) {

    document.querySelector("body").classList.toggle('dark-mode'); // have a look at querySelector :)

    button.classList.toggle("dark-mode");

    if (button.textContent == nightText){

        button.textContent = dayText;

    }else {

        button.textContent = nightText;

    }

}

.dark-mode {

    background-color: #333333;

    color: #dddddd;

}

<body>

    <h1>

      COLOR SHIFTER: Day/Night Mode

    </h1>

    <p>

      Click the button to see some magic! Toggle between Day and Night mode! Give it a try!

    </p>

    <!-- Use css to modify the layout of your page, not <br/> :) -->

    <button onclick="toggleTheme(this)">

      Night Mode

    </button>

    <script src="Javascript.js"></script>

</body>


查看完整回答
反對(duì) 回復(fù) 2023-06-09
?
阿波羅的戰(zhàn)車(chē)

TA貢獻(xiàn)1862條經(jīng)驗(yàn) 獲得超6個(gè)贊

function toggleTheme() {

        document.body.classList.toggle('dark-mode');

        var btn = document.getElementById("myButton");


        if (btn.textContent === "Dark Mode") return btn.textContent = "Day Mode";

        btn.textContent = "Dark Mode"

    }


查看完整回答
反對(duì) 回復(fù) 2023-06-09
  • 4 回答
  • 0 關(guān)注
  • 274 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)