Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Script not removing class from targeted element

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:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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?

>Solution :

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.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading