Can't get my elements from DOM to add them CSS properties?

Question

I am working on a shopify template, so I a tryig to edit some code, and change some CSS properties using JS.

When I inspect my elements, I see that :

I am intersted in four elements, with classes "spr-container", "spr-summary-caption", "spr-summary-actions", "spr-content", So i wrote this code :

<script>
    let urlPr = window.location.href;
    if(urlPr.includes("products")){
      setTimeout(function(){
        console.log(document.getElementsByClassName("spr-container"));
        console.log(document.getElementsByClassName("spr-summary-caption"));
        console.log(document.getElementsByClassName("spr-summary-actions"));
        console.log(document.getElementsByClassName("spr-content"));
      },1000);
    }
</script>

And I get this on my console :

Which means I am getting emty collections, but when I click one of them, the collection length becomes 1 and when I click the element shown in the inspector it takes me to my wanted element.

This is causing me problem, because when I try to get my element like that :

console.log(document.getElementsByClassName("spr-container")[0]);

I get :

undefined

Is there anyway that can help me solve this problem.

Any help would be much appreciated.

Possible duplicate of [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) — Herohtar, Oct 28 '19 at 19:08
@GMaiolo in a file called product.description.liquid, just below my html code. Do you think I have to change it to theme.liquid ? — TaouBen, Oct 28 '19 at 19:09
You'd need to be sure that this script is being executed `after` HTML renders, otherwise it's going to return an empty array. Try tweaking the `setTimeout` to a later time like `10000` and see what happens — GMaiolo, Oct 28 '19 at 19:11
@Herohtar His answer was that scripts are placed before the dom elements, but it is not my case, I am placing my script right after the html code. — TaouBen, Oct 28 '19 at 19:12
The behavior you describe still sounds like the script is executing before the DOM is fully rendered. I don't know how shopify runs its scripts though, so I'm not sure what it's doing. — Herohtar, Oct 28 '19 at 19:14
@GMaiolo I tested it before, but not working, but I replaced my script and put it in my theme.liquid file and worked. But I don't know why actually, because my script were below the dom elements in both cases but Thanks anyway. — TaouBen, Oct 28 '19 at 19:15
@Herohtar Yes, anyway I will close the question if this is the case. — TaouBen, Oct 28 '19 at 19:17
Undeleted the question, it worked once and then same problem, I placed the script just before the end of body element, exactly where scripts should be placed. — TaouBen, Oct 28 '19 at 19:37
I get my HTML collections, 1 item in it, but When I add [0] to my document.getElementsByClassName("nameclass") I get undefined, weiiiiird — TaouBen, Oct 28 '19 at 19:40
If you put a debugger into your code right before the DOM selector, you should be able to pause the page at that moment to check if the elements you are interested in have been rendered in the DOM at the time of your code running. The elements you're interested in _could_ be getting injected by javascript after the initial page rendering. The trick here is getElementsByClassName returns an HTMLCollection object, and `An HTMLCollection in the HTML DOM is live; it is automatically updated when the underlying document is changed.` - https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection — Dave B, Oct 30 '19 at 19:56
(Which is why the console log of the results is showing what you expect, even though at the time the code runs the list is empty) — Dave B, Oct 30 '19 at 19:56

score 1 · Answer 1 · answered Oct 29 '19 at 05:29

Wrap it:

document.addEventListener("DOMContentLoaded", getData);

function getData() {
    let urlPr = window.location.href;
    if(urlPr.includes("products")) {
        console.log(document.getElementsByClassName("spr-container"));
        console.log(document.getElementsByClassName("spr-summary-caption"));
        console.log(document.getElementsByClassName("spr-summary-actions"));
        console.log(document.getElementsByClassName("spr-content"));
    }
}

Can't get my elements from DOM to add them CSS properties?

1 Answers1