I did a toggle button for night and day mode by copying someone's code. I don't know the difference between className and classList. so I tried both className and classList. with the classList the code is working pretty well. instead of classList i put className. but the code doesn't work. plz, help me...
<style>
.btnJerome {
height: 40px;
width: 80px;
border: none;
background: lightblue;
border-radius: 30px;
outline: 0;
cursor: pointer;
position: relative;
}
.span1 {
position: relative;
height: 30px;
width:31px;
background: blue;
border-radius: 50px;
display: block;
transition: .5s;
}
.active {
background: lightgreen;
}
.active span {
background: green;
margin-left: 40px;
}
</style>
<button onclick="toggleBtn()" class="btnJerome" id="btn"><span class="span1"></span></button>
<script>
var btn = document.getElementById("btn");
function toggleBtn() {
btn.classList.toggle("active");
}
</script>
Please refer to the below stackoverflow answer,
Using "classList", you can add or remove a class without affecting any others the element may have. But if you assign "className", it will wipe out any existing classes while adding the new one (or if you assign an empty string it will wipe out all of them).
Assigning "className" can be a convenience for cases where you are certain no other classes will be used on the element, but I would normally use the "classList" methods exclusively.
And "classList" also has handy "toggle" and "replace" methods.
https://teamtreehouse.com/community/difference-between-classlist-and-classname