Problems with getElementById

Question

I'm trying to write simple web app in VSCode. I have little misunderstanding. May be its really simple thing, but i don't know why it doesn't work normally like in examples which i saw.

i have js file (script.js)

 function getHistory(){
    return document.getElementById("history-value").innerText;
}
alert( getHistory());

and my index.html where i'm using div's tags

     <div class="result">
        <div class="history">
            <p  id="history-value">55555</p>
        </div>
        <div class="output">
            <p id="output-value" class="output-value">7777777</p>
        </div>
    </div>

in beginning of course referense to js

<head> 
    <title>Calculator</title>
    <meta charset="utf-8" >
    <link rel="stylesheet" href="style.css">
    <script src="script.js">
        </script>
</head>

But allert are not working. I can't see nothing. If i use

console.log (document.getElementById("history-value").innerText );

it shows null in console window.

Please explain me what's wrong with it?

There is no `innerText` property on a DOM element. You probably want `innerHTML` or `textContent`. — alesc, Feb 15 '20 at 17:52
@alesc ``.innerText`` should work to get the value ``55555`` that is in the DOM element. — kmoser, Feb 15 '20 at 17:53

score 0 · Answer 1 · answered Feb 15 '20 at 17:56

The problem is that your <script> tag appears in the <head> section of your document, and when the script loads, the rest of your HTML has not yet been loaded by the browser, so the <p id="history-value"> tag effectively does not yet exist as far as the browser is concerned.

In this case, you should put your <script> tag just before the </body> tag, or at the very least after the <p id="history-value"> tag, so that <p> tag appears before the Javascript attempts to read it.

score 0 · Answer 2 · answered Feb 15 '20 at 17:56

It looks like the script runs when there is no history-value element. Are you sure you are running the code after document has been loaded?

Your code work in the following snippet (but I guess is due to the fact that javscript is loaded at the end of the document).

But to make sure you can place into a

document.addEventListener( 'DOMContentLoaded', function( event ) {
  // your code here
})

function getHistory(){
  return document.getElementById("history-value").innerText;
}

document.addEventListener( 'DOMContentLoaded', function( event ) {
  alert(getHistory());
});

<div class="result">
  <div class="history">
    <p id="history-value">55555</p>
  </div>
  <div class="output">
    <p id="output-value" class="output-value">7777777</p>
  </div>
</div>

score 0 · Accepted Answer · answered Feb 15 '20 at 18:07

1) As Java script is loaded before html page so you have to add script tage at bottom of the page in your case as you are taking value of history-value element which you have added after script tag so when script tag is loaded there is no element with id history-value so you will get null. So you have to add this script after this element

index.html

<head> 
    <title>Calculator</title>
    <meta charset="utf-8" >
    <link rel="stylesheet" href="style.css">
</head>

<div class="result">
        <div class="history">
            <p  id="history-value">55555</p>
        </div>
        <div class="output">
            <p id="output-value" class="output-value">7777777</p>
        </div>
    </div>

    <script src="script.js"></script>

script.js

function getHistory(){
    return document.getElementById("history-value").innerText;
}
alert( getHistory());

Thank you very much. I was so blind – Gasanov.Sharp Feb 16 '20 at 05:10 — Gasanov.Sharp, Feb 16 '20 at 05:10

Problems with getElementById

3 Answers3