My code, shown below, for a dark theme toggle button isn't working; Visual Studio Code isn't telling me I have any errors. Can someone help me figure out what the issue is?
document.getElementById('themeButton').addEventListener('click'),
function() { /* Theme button script */
document.body.classList.toggle('dark-theme');
}
body {
background-color: rgb(246, 246, 246);
color: black;
h1 {
color: rgb(63, 66, 145);
/* Header 1 features */
font-size: 50px;
padding-bottom: 8px;
margin: 10px;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
/* Header 2 features */
margin: 10px;
}
p {
font-family: Arial, Helvetica, sans-serif;
/* Paragraph features */
font-size: 20px;
padding-bottom: 10px;
margin: 10px;
}
/* Dark theme styles */
.dark-theme {
background-color: #A9a9a9;
/* Dark gray background */
color: #F5F5F5/* Light gray body text */
}
.dark-theme h1 {
color: rgb(170, 172, 244)/* Light blue text for header 1 */
}
}
<h1>Basic Website</h1>
<!-- Site text content -->
<hr>
<h2>Welcome to my basic webpage.</h2>
<p>This isn't my first time coding, but it's been so long that it might as well be.</p>
<img src="treehouse.jpg" alt="An elaborate treehouse.">
<!-- Image -->
<hr>
<button id="themeButton">Change Theme Color</button>
<!-- Theme button -->
The button should change the background to a dark gray, and the text should become light gray, but the button changes nothing when clicked.
You have an error here
document.getElementById('themeButton').addEventListener('click'), function() { /* Theme button script */ document.body.classList.toggle('dark-theme'); }
You must pass the function as the second argument to addEventListener
, like this
document.getElementById('themeButton').addEventListener('click', function() { /* Theme button script */
document.body.classList.toggle('dark-theme');
});
You also have to move your .dark-theme
CSS rules outside of body, because if you use it like in your example, it can only affect body's children, not body itself.
body {
/* Main body styles */
}
/* Dark theme styles */
.dark-theme {
}