I have been experimenting with classLists.toggle but for some reason, I am unable to see the applied styles on the element. I am struggling to pinpoint where exactly I am making a mistake. I have set up IDs without any current styles so that a class can be toggled on or off upon clicking, but I can't understand why the styles are not being applied. The toggled style is being triggered but not its associated styles, which is quite strange. Can someone shed light on why this might be happening?
const clicked = () => {
document.getElementById("box").classList.toggle("toggle");
document.getElementById("text").classList.toggle("change");
}body {
background-color: #42b883;
}
#text {
position: absolute;
font-size: 70px;
right: 750px;
}
#box {
height: 100px;
width: 100px;
background-color: blue;
cursor: pointer;
}
.toggle #box {
background-color: black;
}<div id="box" onClick="clicked()"></div>
<h2 id="text">Test</h2>