getElementById（）是否为空？

因此，我正在尝试制作一个JavaScript程序，该程序将为图像创建一个URL，然后在创建标记时将其放到页面上，以便我可以继续粘贴尽可能多的照片。下面的代码：getElementById（）是否为空？

<!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（或我的电脑画面SRC），它说，类型错误：的document.getElementById（...）为空，并指向第20行，是我的 var newSrc = document.getElementById（“newImage”）。src = imageSource;
一行。有任何想法吗？

来源

2014-01-21 nanowaffle

'使用document.createElement（” img“）'你不会将id属性添加到图像中，也不会将它添加到文档中 – Grundy

如何在同时创建它时给它一个ID？为什么它没有被添加到文档中？谢谢 – nanowaffle

你的意思是这样的：

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

来源

2014-01-21 07:31:44

谢谢，这有助于它的工作:)现在它增加了图像，但它只能从该文件所在的文件夹中做到。任何想法如何使它可以添加和路径，甚至URL，这行得通？ – nanowaffle

@nanowaffle如果你的意思是你想要上传一个文件，那么你需要有类型为'file'的输入元素，比如 –

你正在创建一个元素用一个固定的'id'，这意味着如果你创建了多个元素，它们都会得到相同的'id'。这意味着你正在创建无效的HTML。如果'id'用于样式，类名称就足够了。 – Arjan

使用此

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.You呼吁

document.getElementById('newImage');

这里newImage作为你创建的元素，并且在dom中没有带有id的元素作为newImage，所以你得到空值。

来源

2014-01-21 07:25:32

'document.createElement（）'创建一个新元素，但不会将它添加到DOM。你需要自己做，因为只有你知道它应该去哪里。 – Arjan

他正在做的主要错误，他正在创建元素newImage，并认为该元素作为ID，所以他变得空。我添加了这个元素来阅读你的评论。谢谢 –

的确如此。您的更改现在会创建一个具有固定'id'的元素，这意味着如果您创建了多个元素，它们都将获得相同的'id'。我根本不会使用id属性。如果需要样式，类名称就足够了。 – Arjan

在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;

UPDATE
可能需要使用className代替id因为id应该是页面上独一无二的，但我知道你想添加许多图像

来源

2014-01-21 07:32:21 Grundy

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;

当你调用

来源

2014-01-21 07:32:40 sla55er

getElementById（）是否为空？

回答

相关问题