i need some help with the following error, appreciate your answer!

I have this code:

let removethisone = document.getElementsByClassName('kaching-bundles__bar');
  function removethat() {
    console.log(removethisone[0]);
    let targetedelement = removethisone[0];
    console.log(targetedelement);
    targetedelement.classList.remove('kaching-bundles__bar--variants-hidden')
  }
  removethat()

When I refresh the website, I get this error in the console:

Uncaught TypeError: Cannot read properties of undefined (reading 'classList')

I'm trying to remove a class from a bundle application widget, so that it will display selectable variants in the bundle widget. Only the first element in this 'kaching-bundles__bar' this 'kaching-bundles__bar--variants-hidden' class.

What i've tried so far?

I've tried delaying the function call with setTimeout( removethat(), 3000); as well, because I thought that the website need more time to load in the application widget, hence I'm trying to target an undefined element. I've tried the script without enwrapping the code in a function and run it like that as well and got that the targetedelement was undefined . Once again when I run through the code steps in the console it works properly, but when I refresh the page it just doesn't work. Can anyone help out with this?

CodePudding user response：

It seems like your guess is right on that the installed bundle application doesn't yet load the elements you're trying to call a function on, hence receiving an undefined console log. Try using the setTimeout when defining the function, like this:

  setTimeout(function removethat() {
    console.log(removethisone[0]);
    let targetedelement = removethisone[0];
    console.log(targetedelement);
    targetedelement.classList.remove('kaching-bundles__bar--variants-hidden');
  },1000)

Let me know if this could help. This way you're delaying the function and giving the website enough time to load the bundle widget, so you will be able to target the widget elements.