getElementById() является нулем?

Поэтому я пытаюсь создать программу Javascript, которая будет брать URL-адрес изображения и затем помещать его на страницу при создании тега, чтобы я мог просто продолжать вставлять столько фотографий, сколько захочу. Вот код:

<!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>

Моя проблема заключается в том, что когда я помещаю int URL (или src рисунка с моего ПК), он говорит, что TypeError: document.getElementById (...) имеет значение null и указывает на строку 20, являющуюся моим var newSrc = document.getElementById("newImage").src= imageSource;
линия. Есть идеи?

Источник

4 ответа

Решение

Вы имеете в виду что-то вроде этого:

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);
    }
}

Демо:: jsFiddle

Источник

Использовать этот

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 = "";
    }

Поймите, какую ошибку вы сделали выше:

1. Сначала вы создали элемент и присваиваете переменную newImage

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

2. Вы звоните

 document.getElementById('newImage');

Здесь newImage как элемент, который вы создали, и в DOM нет элемента с id как newImage так что вы получили ноль.

Источник 
var newImage = document.createElement("img");
var newSrc = document.getElementById("newImage").src= imageSource;

Становиться:

var newImage = document.createElement("img");
newImage.setAttribute('id','newImage');
var newSrc = document.getElementById("newImage").src = imageSource;
Источник

В мдн видно что createElement только создать элемент и не добавлять его в DOM. Поэтому, если вы хотите добавить созданный элемент, вам нужно изменить свой код следующим образом

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

после того как эта строка будет работать

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

но вам не нужно найти его, если у вас уже есть это изображение в newImage переменная, так что эту строку вы можете изменить как

var newSrc = newImage.src= imageSource;

ОБНОВИТЬ
Возможно, вам нужно использовать className вместо id так как id должен быть уникальным на странице, но, как я понимаю, вы хотите добавить много изображений

Источник
Другие вопросы по тегам