I'm having a html file
<html>
...
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Scroll Animation</h1>
<button onclick="testing()">testing</button>
<div class="box1"><h2>Content</h2></div>
<script src="script.js"></script>
</body>
</html>
on pushing the button I want a class "active" to be toggled using this script.js file:
let box1 = document.querySelector(".box1");
function testing() {
console.log(box1);
console.log("before toggling");
box1.classList.toggle("active");
console.log("after toggling");
console.log(box1);
}
Why is the console showing the box1 container with an "active" class already before I would assume the code to toggle that class:
script.js:4 <div class="box1 active">…</div>
script.js:5 before toggling
script.js:7 after toggling
script.js:8 <div class="box1 active">…</div>
I would assume the first console.log to show class="box1" instead of class="box1 active"
