How to toggle button text when clicked with JavaScript in HTML

Question

I am learning the basics of JavaScript and seem to have run into a wall and just can not find the answer to figure out how to change the button text when clicked. So my JavaScript code runs to where when the button in html is clicked, then the background color of the site toggles night and day (in terms of mode). However I am trying to toggle the text in the button to change when clicked.

So when the background color is in day mode, the button says "Night Mode", then once clicked, I would want the button text to toggle to "Day Mode" to convert back to original state. Your help will be greatly appreciated!!

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

fromaline · Accepted Answer · 2020-10-23 05:45:15Z

2

Actually you have some typos and mistakes in your code, it is not only about innerHTML. Check the snippet.

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>

edited Oct 23, 2020 at 5:45

answered Oct 23, 2020 at 5:39

fromaline

5273 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

marcosvaldez81 Over a year ago

Wow thank you. I made some knucklehead mistakes but I guess its part of the learning process. Thank you this worked.

fromaline Over a year ago

Yeah, it‘s definitely a part of the process. Keep learning!

cabrillosa · Accepted Answer · 2020-10-23 05:53:39Z

use innerHTML to set/get button text. Also, if you want to to debug your JS easily, you can use the browser debugging tool (F12->console).

   <!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>

devdgehog · Accepted Answer · 2020-10-23 05:53:46Z

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>

Sifat Haque · Accepted Answer · 2020-10-23 06:06:34Z

You just need to pass this to your inline function. Like 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>

Enis Gur · Accepted Answer · 2020-10-23 06:10:31Z

2

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

answered Oct 23, 2020 at 6:10

Enis Gur

891 silver badge9 bronze badges

Comments

O_o · Accepted Answer · 2020-10-23 05:48:16Z

1

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>

edited Oct 23, 2020 at 5:48

answered Oct 23, 2020 at 5:32

O_o

9133 gold badges13 silver badges30 bronze badges

Collectives™ on Stack Overflow

How to toggle button text when clicked with JavaScript in HTML

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related