Stack Overflow Asked by marcosvaldez81 on December 21, 2020
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";
}
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>Correct answer by fromaline on December 21, 2020
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 by Enis Gur on December 21, 2020
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>Answered by Sifat Haque on December 21, 2020
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>Answered by devdgehog on December 21, 2020
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>
Answered by cabrillosa on December 21, 2020
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>Answered by at-in on December 21, 2020
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP