I have written a small JS function to change the class name of an HTML element. Sadly, my const is somehow undefined, so the function doesn't run.
This is my JS:
deglitcher();
function deglitcher() {
const glitch = document.querySelector('#bottom-gl');
setTimeout(function () {
glitch.className = 'glitch-off';
}, 2000);
}
This is how my HTML looks like:
<div class="sign">
<h1 class="glitch" id="upper-gl" data-text="Glitch1">Glitch1</h1>
<h1 class="glitch" id="bottom-gl"data-text="Glitch2">Glitch2</h1>
<span class="sub">Test</span>
</div>
I would like it to look like that:
<div class="sign">
<h1 class="glitch-off" id="upper-gl" data-text="Glitch1">Glitch1</h1>
<h1 class="glitch-off" id="bottom-gl"data-text="Glitch2">Glitch2</h1>
<span class="sub">Test</span>
</div>
I hope someone smarter than myself, can figure it out
The fix which I came up with, thanks to the generous help of ARMAAN and A Haworth, is as follows:
deglitcher();
function deglitcher() {
const glitch = document.getElementById('bottom-gl');
setTimeout(function () {
console.log(glitch)
glitch.classList.add('glitch-off');
glitch.classList.remove('glitch');
console.log('Trele Morele');
}, 2000);
}
<script src="../src/js/glitch.js" defer></script>
As of now the issue is resolved, thanks for your help everyone ;-)