Блог

Главная - Вопросы по программированию - Как переключать текст кнопки при нажатии с помощью JavaScript в HTML

Как переключать текст кнопки при нажатии с помощью JavaScript в HTML

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я изучаю основы JavaScript и, похоже, столкнулся со стеной и просто не могу найти ответ, чтобы выяснить, как изменить текст кнопки при нажатии. Итак, мой код JavaScript выполняется там, где при нажатии кнопки в html цвет фона сайта переключается на день и ночь (с точки зрения режима). Однако я пытаюсь переключить текст в кнопке, чтобы он менялся при нажатии.

Итак, когда цвет фона находится в дневном режиме, на кнопке написано «Ночной режим», затем после нажатия я бы хотел, чтобы текст кнопки переключался в «Дневной режим», чтобы преобразовать обратно в исходное состояние. Ваша помощь будет высоко оценена!!

HTML:

 <!DOCTYPE html>
<html lang="en" 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>

JavaScript:

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

Ответ №1:

На самом деле у вас есть некоторые опечатки и ошибки в вашем коде, речь идет не только о 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>

Комментарии:

1. Вау, спасибо. Я допустил несколько ошибок, но, думаю, это часть процесса обучения. Спасибо, это сработало.

2. Да, это определенно часть процесса. Продолжайте учиться!

Ответ №2:

используйте innerHTML для установки / получения текста кнопки. Кроме того, если вы хотите легко отладить свой JS, вы можете использовать инструмент отладки браузера (F12-> консоль).

    <!DOCTYPE html>
    <html lang="en" 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>

Ответ №3:

 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>

Ответ №4:

Вам просто нужно перейти this к вашей встроенной функции. Вот так onclick="toggleTheme(this)" 

 function toggleTheme() {
  var btn = document.getElementById("myButton");
  document.body.classList.toggle('dark-mode');
  btn.classList.toggle("dark-mode");
  if (btn.value === "Night Mode"){
    btn.value = "Day Mode";
  }else {
    btn.value = "Night Mode";
  }
}  
 .dark-mode {
  background-color: #000;
  color: #fff;
}  
 <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <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(this)" id="myButton" >Dark Mode</button>

  </body>
</html>

Ответ №5:

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

Ответ №6:

 function toggleTheme() {
  document.body.classList.toggle('dark-mode');
  var btn = document.getElementById("myButton");
  if (btn.innerHTML == "Night Mode"){
    btn.innerHTML = "Day Mode";
  }
  else {
    btn.innerHTML = "Night Mode";
  }
}  
 <!DOCTYPE html>
<html lang="en" 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" >Night Mode</button>
  </body>
</html>