Javascript在Chrome中返回null，在源代码中返回HTML元素

Question

I am trying to read this HTML in the console in Chrome:

<span id="lblSummaryFreight">Kr 79</span>

Using this JS:

document.getElementById('lblSummaryFreight').innerHTML;

However, after the page has loaded, running this line returns null or invalid. If i inspect the element and then run the code, it works as intended and returns "Kr 79". So, is it some kind of DOM issue I am not aware of, or a browser-specific issue?

I am using this as a variable in Google Tag Manager, and it works in 50% of the cases. I don't have access to the source code of the webpage itself, so that's why I need to lean on this rather clunky way of getting the data.

A lot of posts on this suggest that this is because the script is fired before the DOM is ready, but I don't think this is an issue, as I am also testing this in the console after the page has loaded (and the HTML elements are present), and in Google Tag Manager I have specified that the tag should fire after DOM is ready.

Any clues?

Edit / Clarification: I can't alter the code of the page itself, only read the output source, which i am trying with JS via GTM

Answer 1

Don't seem to be able to resolve this issue, and as it seems to be the fault of some quirky source, I will try to figure out another way to get the data I need.

What I have learned:

• The issue seems to be specific to Chrome, as it works in other browsers. This is supported by the fact that the GTM tag where this code is implemented returns correct values in ~50% of the cases
• Testing the page in Android native browser, it will also return 'undefined'. After reloading the page that fires the tag, it returns correct value.

• The whole DOM seems unavailable in the console. Tried also this:

  document.getElementsByClassName('complete').length

Which returns 0, but there are around 10 instances of the class in the source. After inspecting anywhere on the page, it returns correct number.

• Any delay in running the script won't help, only the symbolic inspecting of elements or reloading the page helps.

So my conclusion is that the way this webpage is built somehow goes against the grain of some browsers - it seems like the source goes out of the memory after the source is loaded. But this is way beyond my level of understanding.

Thanks all for all inputs!

Answer 2

It looks like an async issue. Try this:

//Using Jquery
$( document ).ready(function() {
    document.getElementById('lblSummaryFreight').innerHTML;
});

or

//Add this at the end of the body, after all of your content
<script>
(function() {
     document.getElementById('lblSummaryFreight').innerHTML;
})();
</script>

Answer 3

Try to change how the tag is fired in GTM. Fire them when Window Loaded, and try again. Maybe the element is being changed in another js file.

Trying jQuery is a good point. I have had similar problems and jQuery have solved them all.