getElementById() 为空？答案

【问题标题】：getElementById() is null?getElementById() 为空？
【发布时间】：2014-02-10 15:58:24
【问题描述】：

所以我正在尝试制作一个 JavaScript 程序，该程序将获取图像的 URL，然后将其放在页面上，同时创建一个 <img> 标记，以便我可以继续粘贴任意数量的照片。代码如下：

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

我的问题是，当我输入一个 URL（或来自我的 PC 的图片 src）时，它说 TypeError: document.getElementById(...) 为空，并指向第 20 行，是我的

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

线。有什么想法吗？

【问题讨论】：

当您调用document.createElement("img") 时，您不会将 id 属性添加到图像，也不会将其添加到文档中
如何在创建ID的同时给它一个ID？为什么它没有被添加到文档中？谢谢

标签： javascript html image src createelement

【解决方案1】：

使用这个

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 的元素，所以您得到了 null。

【讨论】：

document.createElement() 创建一个新元素但不将其添加到 DOM。你需要自己做，因为只有你知道它应该去哪里。
他犯的主要错误是他正在创建元素 newImage 并将该元素视为 id，因此他得到了 null。我将元素添加到 dom 阅读您的评论。谢谢
确实如此。您的更改现在创建了一个具有固定id 的元素，这意味着如果您创建多个元素，它们都将获得相同的id。我根本不会使用 id 属性。如果需要样式，一个类名就足够了。

【解决方案2】：

你的意思是这样的吗：

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

【讨论】：

谢谢，这有助于它工作:) 现在它添加了图像，但它只能从这个文件所在的文件夹中完成。任何想法如何制作它，以便我可以添加和路径或甚至是一个 URL 并让它工作？
@nanowaffle 如果您的意思是要上传文件，那么您需要具有“文件”类型的输入元素，例如
您正在创建一个具有固定id 的元素，这意味着如果您创建多个元素，它们都会得到相同的id。这意味着您正在创建无效的 html。如果id 用于样式，一个类名也足够了。

【解决方案3】：

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;

【讨论】：

【解决方案4】：

在mdn 中，您可以看到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 在页面上应该是唯一的，但据我所知，您想要添加许多图像

【讨论】：