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";
}
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";
}
6 Answers
Reset to default 2Actually 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>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>
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>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>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"
}
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>