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（）是否爲空？

回答

相關問題