I am creating a Bootstrap website, and I want a button to turn on "Dark Mode". I have managed to do this to the navbar and that is good, however the button itself does not change after multiple clicks.
var darkMode = false;
function toggleDarkMode() {
if (!darkMode) {
darkMode = true;
$("#darkMode").removeClass("btn-dark").addClass("btn-light").text("Light Mode");
$("nav").removeClass("navbar-light bg-light").addClass("navbar-dark bg-dark");
} else {
darkMode = false;
$("#darKMode").removeClass("btn-light").addClass("btn-dark").text("Dark Mode");
$("nav").removeClass("navbar-dark bg-dark").addClass("navbar-light bg-light");
}
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Home</title>
</head>
<body>
<nav class="navbar sticky-top navbar-light bg-light navbar-expand-lg">
<a class="navbar-brand" href="#">Jack</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Tools</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item active" href="#">Space Invaders</a>
</div>
</ul>
<ul class="nav justify-content-end">
<li class="nav-item">
<button class="btn btn-dark" type="button" onclick="toggleDarkMode()" id="darkMode">Dark Mode</button>
</ul>
</div>
</nav>
<div class="container">
<div class="jumbotron vertical-center bg-light">
<h1 class="display-4">Space Invaders</h1>
<p class="lead">I made a game of Space Invaders recently. You can play it right here, on my website!</p>
<hr class="my-4" />
<a class="btn btn-success btn-lg" href="#" role="button">Play!</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
</html>If you run the above snippet in fullscreen mode and press the button multiple times, you see that the navbar changes color, the button changes color, and the text in the button changes as well. However, after one click, the text goes to "Light Mode" and doesn't change, and the color doesn't change either, however the navbar still changes.
Why is this happening? In my JavaScript/jQuery code, you can see that that the changes are applied to the button before they are applied to the navbar, but the button does not change after the first press.
Why is this happening? How can I fix it?
