When I click the 'night' button, I want the word color in the class=css to change to white. However, this is not working as intended, even though all other word colors are changing correctly.
Here is my code:
.css {
font-weight: bold;
color: pink;
}
#first {
color: lightblue;
}
span {
font-weight: lighter;
color: green;
}
<input type="button" value="night"
onclick="
document.querySelector('body').style.backgroundColor = 'darkblue';
document.querySelector('body').style.color = 'yellow';
document.querySelector('.css').style.color = 'white';
document.querySelector('#first').style.color = 'orange';">
<input type="button" value="day"
onclick="
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
document.querySelector('.css').style.color = 'pink';
document.querySelector('#first').style.color = 'lightblue';">
<h1><a href="index.html">WEB</a></h1>
<h2 style="background-color:lightblue; color:Tomato;">CSS</h2>
<span id="first" class="css">CSS</span> is a language that describes the style of an HTML document.
<span class="css">CSS</span> describes how <span>HTML</span> elements should be displayed.
This tutorial will teach you <span class="css">CSS</span> from basic to advanced.