0

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> &nbsp; 
        <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> &nbsp; 
        <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

Un4givenPG
  • 1
  • 1
  • Does this answer your question? [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – Ivar Feb 19 '22 at 19:41
  • 1
    Ensure your HTML is loaded before you enter the JavaScript. – A Haworth Feb 19 '22 at 19:48
  • Indeed, Sir, you were right. Thank you. I had used: – Un4givenPG Feb 19 '22 at 21:32

1 Answers1

0

The fix which I came up with, thanks to the generous help of ARMAAN and A Haworth, is as follows:

  1. Correct the code for bad selector ('bottom-gl) instead of ('#bottom-gl')
  2. Use classList instead of className
    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);
    }
  1. And finally - thanks to A Haworth, I used defer in my loader:
    <script src="../src/js/glitch.js" defer></script>

As of now the issue is resolved, thanks for your help everyone ;-)

Un4givenPG
  • 1
  • 1