I’m referencing the documentation on w3schools on how to toggle between id’s/classes but it’s not working with my code. The only difference is that the documentation uses a button element whereas I am using a div and it’s not working.
The code:
function playSong(track) {
player.src = track;
player.play();
var element = document.getElementById("one");
element.classList.toggle("one-clicked");
}#one {
width: 150px;
height: 50px;
border: 2px dashed black;
border-radius: 25px;
display: flex;
align-items: center;
justify-content: center;
animation: sway-one 20s infinite linear;
cursor: pointer;
}
#one p {
-webkit-text-stroke-width: .1px;
-webkit-text-stroke-color: black;
transition: all .3s linear;
}
#one-clicked {
background-color: black;
-webkit-text-fill-color: rgb(89, 235, 89);
font-size: 130%;
transition: all .3s linear;
}<div class="playlist">
<div class="tracks">
<div id="one" onclick="playSong('tracks/track-1.wav')">
<p>Burn</p>
</div>
</div>
</div>
>Solution :
In your css, change #one-clicked to .one-clicked
.one-clicked {
background-color: black;
-webkit-text-fill-color: rgb(89, 235, 89);
font-size: 130%;
transition: all .3s linear;
}
Source: https://www.w3schools.com/howto/howto_js_toggle_class.asp