getElementById() is null?

Question

So I am trying to make a JavaScript program that will take a URL for an image and then put it onto the page while creating an <img> tag so that I can just continue pasting as many photos as I want. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Low-Budget Online Album</title>
<meta charset="utf-8">
<script>
    function init() {
        var button = document.getElementById("addButton");
        button.onclick = buttonClick;
    }
window.onload = init;

    function buttonClick() {
        var imageSource = document.getElementById("imageInput").value;
        if (imageSource == "") {
            alert("Please enter the source for an image.");
        }
        else {
            var newImage = document.createElement("img");
            var newSrc = document.getElementById("newImage").src= imageSource;
    
            imageInput.value = "";
        }
    }       
</script>
</head>
<body>
<input type="text" id="imageInput" size="40" placeholder="Image Source">
<input type="button" id="addButton" value="Add Image">
<img id="images" src="">
</img>
</body>
</html>

My problem is, is that when I put int a URL (or picture src from my PC) it says that TypeError: document.getElementById(...) is null, and points to line 20, being my

var newSrc = document.getElementById("newImage").src= imageSource;

line. Any ideas?

when you call `document.createElement("img")` you don't add id attribute to image, also you don't add it to document — Grundy, Jan 21 '14 at 07:22
How do I give it an ID while simultaneously creating it? And why is it not being added to the document? Thanks — nanowaffle, Jan 21 '14 at 07:24

Shoaib Chikate · Answer 1 · 2014-01-21T07:38:23.173

2

Use this

else {
        var newImage = document.createElement("img"); //this line creates element <img> element in the dom.
        newImage.setAttribute("id", "newImage");             
        newImage.src= imageSource;
        document.body.appendChild(newImage);//adds element <img src="a.jpg" id='newImage'>to the dom.
        imageInput.value = "";
    }

Understand what mistake you have done above:

1.First you created element and assign to a variable newImage

 var newImage=document.createElement("img");

2.You are calling

 document.getElementById('newImage');

Here newImage as element that you created and in the dom there is no element with id as newImage so you were getting null.

edited Jan 21 '14 at 07:38

answered Jan 21 '14 at 07:25

Shoaib Chikate

8,665
12
47
70

`document.createElement()` creates a new element but does not add it to the DOM. You need to do that yourself, because only you know where it should go. – Arjan Jan 21 '14 at 07:31
Main mistake he was doing that he was creating the element newImage and considering that element as id so he was getting as null. I added the element to dom reading your comment.Thanks – Shoaib Chikate Jan 21 '14 at 07:35
That's true. Your changes now create an element with a fixed `id`, which means that if you create several elements, they all will get the same `id`. I wouldn't use the id attribute at all. If needed for styling, a class name will suffice. – Arjan Jan 21 '14 at 07:50

score 1 · Accepted Answer · answered Jan 21 '14 at 07:31

1

do you mean something like this:

function init() {    
    var button = document.getElementById("addButton");
    button.onclick = buttonClick;    
}
window.onload = init;

function buttonClick() {        
    var imageSource = document.getElementById("imageInput").value;
    if (imageSource == "") {
        alert("Please enter the source for an image.");
    }
    else {
        var newImage = document.createElement("img");
        newImage.src= imageSource;
        newImage.setAttribute("id", "newImage");
        imageInput.value = "";
        document.body.appendChild(newImage);
    }
}

Demo:: jsFiddle

answered Jan 21 '14 at 07:31

Sudhir Bastakoti

99,167
15
158
162

Thanks, this helped it work :) Now it adds the image, but it can only do it from the folder this file is located in. Any ideas how to make it so I can add and path or even a URL into it and have it work? – nanowaffle Jan 21 '14 at 07:35
@nanowaffle if you mean you want to upload a file then you need to have input element of type 'file', like – Sudhir Bastakoti Jan 21 '14 at 07:50
You are creating an element with a fixed `id`, which means that if you create multiple elements they all get the same `id`. That means you're creating invalid html. If the `id` is used for styling, a class name would suffice too. – Arjan Jan 21 '14 at 07:52

Grundy · Answer 3 · 2014-01-21T07:39:04.093

in mdn you can see that createElement only create element and not add it to DOM. So if you want add created element you need change your code like this

var newImage = document.createElement("img");
newImage.id = "newImage";
document.body.appendChild(newImage);

after this line will work

var newSrc = document.getElementById("newImage").src= imageSource;

but you don't need get find it if you already have this image in newImage variable, so this line you can change like

var newSrc = newImage.src= imageSource;

UPDATE
Possibly you need use className instead of id because id should be unique on page, but as i understand you want add many images

score 0 · Answer 4 · answered Jan 21 '14 at 07:32

var newImage = document.createElement("img");
var newSrc = document.getElementById("newImage").src= imageSource;

Become:

var newImage = document.createElement("img");
newImage.setAttribute('id','newImage');
var newSrc = document.getElementById("newImage").src = imageSource;

getElementById() is null?

4 Answers4