TypeError: document.getElementById(...) is null in JavaScript

Question

This code is working on JSFiddle but It does not work on my script also, I get this error with Firebug

Where is my mistake?

TypeError: document.getElementById(...) is null

document.getElementById("image").onclick = function() {
  if (this.src == "https://i.stack.imgur.com/5FoXm.png?s=48&g=1") {
    this.src = "https://i.stack.imgur.com/EoD62.jpg?s=32&g=1";
  } else {
    this.src = "https://i.stack.imgur.com/5FoXm.png?s=48&g=1";
  }
};

To elaborate on what Bartosz said, if your script appears before the HTML for your image, then it won't work. Try moving the script to the very bottom of your HTML, right before the closing
tag, if it isn't there already. — Matt Browne, Sep 11 '16 at 11:12

score 1 · Answer 1 · edited May 23 '17 at 11:48

1

I added before </body> DOM and working. @Bartosz Gościński - I solved the problem with his idea

edited May 23 '17 at 11:48

Community

1
1

answered Sep 11 '16 at 11:17

Editor

622
1
11
24

score 0 · Answer 2 · answered Sep 11 '16 at 11:02

0

You have added the line document.getElementById("image3").onclick = function() { twice in your code and the second time the name is imag3e instead of image3 which is not present in the DOM and it could be the reason you are getting the error. Remove the unnecessary line and try the following code.

document.getElementById("image").onclick = function() {
  if (this.src == "https://i.stack.imgur.com/5FoXm.png?s=48&g=1") {
    this.src = "https://i.stack.imgur.com/EoD62.jpg?s=32&g=1";
  } else {
    this.src = "https://i.stack.imgur.com/5FoXm.png?s=48&g=1";
  }
};

answered Sep 11 '16 at 11:02

Joyson

3,025
1
20
34

`image` I fixed my question – Editor Sep 11 '16 at 11:05
The line `document.getElementById("image").onclick = function() {` is still included twice. Remove one of them and run the code – Joyson Sep 11 '16 at 11:10

TypeError: document.getElementById(...) is null in JavaScript

2 Answers2