猿问

在 HTML 中使用 JavaScript 单击时如何切换按钮文本

我正在学习 JavaScript 的基础知识，似乎遇到了困难，只是找不到解决单击时如何更改按钮文本的答案。因此，我的 JavaScript 代码运行到单击 html 中的按钮时的位置，然后网站的背景颜色在白天和黑夜之间切换（就模式而言）。但是我试图切换按钮中的文本以在单击时更改。


因此，当背景颜色处于白天模式时，按钮会显示“夜间模式”，然后单击后，我希望按钮文本切换到“白天模式”以转换回原始状态。对你的帮助表示感谢！！


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";

}


芜湖不芜
浏览 231回答 4
4回答

元芳怎么了

实际上你的代码中有一些错别字和错误，这不仅仅是关于 innerHTML。检查片段。document.getElementById("myButton").addEventListener("click", function (e) {&nbsp; document.body.classList.toggle('dark-mode');&nbsp; // element.classList.toggle("dark-mode");&nbsp; if (e.target.textContent === "Dark Mode") {&nbsp; &nbsp; e.target.textContent = "Day Mode";&nbsp; } else {&nbsp; &nbsp; e.target.textContent = "Dark Mode";&nbsp; }});<body>&nbsp; <h1>COLOR SHIFTER: Day/Night Mode</h1>&nbsp; <p>Click the button to see some magic! Toggle between Day and Night mode! Give it a try!</p>&nbsp; <br><br><br><br>&nbsp; <button id="myButton">Dark Mode</button></body>
0

冉冉说

使用 innerHTML 设置/获取按钮文本。另外，如果你想轻松调试你的JS，你可以使用浏览器调试工具（F12->控制台）。&nbsp; &nbsp;<!DOCTYPE html>&nbsp; &nbsp; <html dir="ltr">&nbsp; &nbsp; &nbsp; <head>&nbsp; &nbsp; &nbsp; &nbsp; <meta charset="utf-8" />&nbsp; &nbsp; &nbsp; &nbsp; <link rel="stylesheet" href="style.css" />&nbsp; &nbsp; &nbsp; &nbsp; <title>Button Shifter</title>&nbsp; &nbsp; &nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .dark-mode {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: black;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .whiteText {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: white;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; </style>&nbsp; &nbsp; &nbsp; </head>&nbsp; &nbsp; &nbsp; <body>&nbsp; &nbsp; &nbsp; &nbsp; <div id="heading">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 class="paraText1">COLOR SHIFTER: Day/Night Mode</h1>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="paraText">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Click the button to see some magic! Toggle between Day and Night mode!&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Give it a try!&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <br /><br /><br /><br />&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <button onclick="toggleTheme()" id="myButton">Dark Mode</button>&nbsp; &nbsp; &nbsp; </body>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; function toggleTheme() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.body.classList.toggle("dark-mode");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("heading").classList.toggle("whiteText");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var btn = document.getElementById("myButton");&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (btn.innerHTML == "Night Mode") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; btn.innerHTML = "Day Mode";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; btn.innerHTML = "Night Mode";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; </script>&nbsp; &nbsp; </html>
0

一只斗牛犬

const nightText = "Night Mode";const dayText = "Day Mode";function toggleTheme(button) {&nbsp; &nbsp; document.querySelector("body").classList.toggle('dark-mode'); // have a look at querySelector :)&nbsp; &nbsp; button.classList.toggle("dark-mode");&nbsp; &nbsp; if (button.textContent == nightText){&nbsp; &nbsp; &nbsp; &nbsp; button.textContent = dayText;&nbsp; &nbsp; }else {&nbsp; &nbsp; &nbsp; &nbsp; button.textContent = nightText;&nbsp; &nbsp; }}.dark-mode {&nbsp; &nbsp; background-color: #333333;&nbsp; &nbsp; color: #dddddd;}<body>&nbsp; &nbsp; <h1>&nbsp; &nbsp; &nbsp; COLOR SHIFTER: Day/Night Mode&nbsp; &nbsp; </h1>&nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; Click the button to see some magic! Toggle between Day and Night mode! Give it a try!&nbsp; &nbsp; </p>&nbsp; &nbsp; <!-- Use css to modify the layout of your page, not <br/> :) -->&nbsp; &nbsp; <button onclick="toggleTheme(this)">&nbsp; &nbsp; &nbsp; Night Mode&nbsp; &nbsp; </button>&nbsp; &nbsp; <script src="Javascript.js"></script></body>
0

阿波罗的战车

function toggleTheme() {&nbsp; &nbsp; &nbsp; &nbsp; document.body.classList.toggle('dark-mode');&nbsp; &nbsp; &nbsp; &nbsp; var btn = document.getElementById("myButton");&nbsp; &nbsp; &nbsp; &nbsp; if (btn.textContent === "Dark Mode") return btn.textContent = "Day Mode";&nbsp; &nbsp; &nbsp; &nbsp; btn.textContent = "Dark Mode"&nbsp; &nbsp; }
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答