JavaScript Basic DOM/JS syntax issue - element.closest is not a function

[JRR]

Hi, I'm really basic in my JS knowledge, but I usually get by with some research here and there, but I just can't figure this out, and I know it's a really simple issue, I just can't find a solution online anywhere. I've tried a load of different permutations, calling functions, etc. I'm just getting more and more in the weeds. Here's the issue:

I need to add a background to an element that I don't have direct control over. So, I am adding a child DIV into that element and using the following code snippet in a SCRIPT tag in the head of my template to add a class to the grand-parent element:

<script type="text/javascript">
const greyback = document.getElementsByClassName('shaddowChild');


greyback.closest('td').classList.add('backShaddow');


</script>

For some reason, the browser console just keeps throwing "Uncaught TypeError: greyback.closest is not a function" as if it doesn't recognise that closest() isn't a function. I know it's all just down to how I structure this basic script, but I just don't know enough about what I'm doing to get it to work.

Thanks in advance for your help!!!

 

[Johna]

Try making shaddowChild an id and then instead getElementById.

Also why can't you just do it like this:

document.getElementsByClassName("shaddowChild").style.background = "#FFFFFF"; //put any colour or image you want here

 

[Deleted member 2829]

I think the reason you get the error is because closest() is a method for a single DOM element. Your var greyBack is not an element, but an array of elements (even if there is only one element with classname "shaddowChild"). So I think it stands to reason you cannot invoke the closest() method on it. If that is indeed the case, the error message is pretty lame though...

 

[JRR]

I think the reason you get the error is because closest() is a method for a single DOM element. Your var greyBack is not an element, but an array of elements (even if there is only one element with classname "shaddowChild"). So I think it stands to reason you cannot invoke the closest() method on it. If that is indeed the case, the error message is pretty lame though...

That makes the most sense. So, I need to find a way to run through the array of elements to change them all. If you have any suggestions, I'd be grateful, but at least I have a clue now, thanks!

 

[JRR]

Try making shaddowChild an id and then instead getElementById.

Also why can't you just do it like this:

document.getElementsByClassName("shaddowChild").style.background = "#FFFFFF"; //put any colour or image you want here

It really doesn't matter if I use getElementById or getElementByClassName, that isn't the sticking point. I'm using class as the element identifier because I don't want to have to add a different id to each section I want given the same style (though I may have to if I can't find an appropriate way to cycle through the array of class elements on the page).

As for the inline styling, that would not achieve the effect I need as it ignores the parent entirely. That is the whole purpose of using closest(), to target the distant parent element that I can't directly edit in the HTML.

 

[Deleted member 2829]

Looping trough your array of elements is the easiest of things:

for (const greyback of document.getElementsByClassName('shaddowChild') )
  greyback.closest('td').classList.add('backShaddow');
}