document.getElementById('blocks').value = blocks; is giving an error

Question

Okay so, I once tried this a long time ago and it never happened before.

if I do

var blocks = 0;
document.getElementById('blocks').value = blocks;

Uncaught TypeError: Cannot set property 'value' of null

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <link rel="stylesheet" href="/css/Index.css">
    <script src="/js/Index.js"></script>
</head>
<body>
    <input type = "text" id="blocks"/>
</body>
</html>

Does this answer your question? [Where is the ideal place to load javascripts in html?](https://stackoverflow.com/questions/39312681/where-is-the-ideal-place-to-load-javascripts-in-html) — Alon Eitan, Dec 18 '19 at 17:12

score 3 · Answer 1 · answered Dec 18 '19 at 16:38

Try moving your script to the bottom of the body. Element does not exist at the time of execution.

<head>
    <title>Home</title>

    <link rel="stylesheet" href="/css/Index.css">

</head>

<body>
    <input type = "text" id="blocks"/>
    <script src="/js/Index.js"></script><!-- here-->

</body>

score 1 · Answer 2 · answered Dec 18 '19 at 16:40

1

If your script is saved in its own JS file (i.e. not as a <script> tag in the HTML), you cannot access DOM elements until the document is loaded. So, wrap your code in an onload event handler:

document.onload = function() {
    var blocks = 0;
    document.getElementById('blocks').value = blocks;
}

answered Dec 18 '19 at 16:40

Anis R.

6,656
2
15
37

1

It is considered "better" practice to add a new listener for events using `window.addEventListener('load', function() { //... });` rather than via direct assignment. As the name suggests, this adds a new listener (rather than specifying a definitive one). – ne1410s Dec 18 '19 at 16:47

score 0 · Answer 3 · answered Dec 18 '19 at 16:39

Try placing the <script> tag at the end of your <body> element to ensure that the element is accessible at the time the script is called:

<!DOCTYPE html>
<head>
    <title>Home</title>
    <link rel="stylesheet" href="/css/Index.css">
</head>
<body>
    <input type = "text" id="blocks"/>
    <script src="/js/Index.js"></script>
</body>

score 0 · Answer 4 · answered Dec 18 '19 at 16:42

0

load your script in footer section or very end of the body instead of head. Your script is executing before DOM is loaded or call the specified statements under load event.

answered Dec 18 '19 at 16:42

sagar

732
1
6
25

score 0 · Answer 5 · answered Dec 18 '19 at 16:49

This is failing because your script is running before the DOM is finished rendering. You should always place your DOM-manipulating script inside document.onload function, which runs after the DOM has finished loading.

Also, you should always check for NPE (NullPointerException); it's a good habit to get into:

document.onload = () => {
  const element = document.getElementById('blocks');
  if (element) {
    element.value = 0;
  } else {
    // consider publishing some warning
    console.error("Could not find element #blocks");
  }
}

This doesnt play nice if another script is also attempting to listen for document load events though. So `document.addEventListener('load', function() { //... })` would be a better way to go... — ne1410s, Dec 18 '19 at 16:50

score 0 · Answer 6 · answered Dec 18 '19 at 16:59

As others have suggested, the common practice to ensure your script runs after elements have loaded is to move the script tag to the bottom of the body, after the elements themselves. However, a more modern approach is to use the defer attribute on your script tag: this ensures the script won't load until your DOM has loaded, but you don't need to worry about the tag's placement in the page relative to DOM elements you'll be manipulating. It's supported by all modern browsers, even IE10+.

So simply add defer onto your existing <script> tag and everything should work :)

document.getElementById('blocks').value = blocks; is giving an error

6 Answers6