lastElementChild返回null

我正在處理將頁面拆分爲兩個div元素然後在左側添加隨機放置圖像的div，然後我使用.cloneNode()在右側複製，減去最後一個子圖像。lastElementChild返回null

它的那部分工作正常，但我應該添加一個事件處理程序到左div的最後一個元素，但是當我嘗試執行此操作時，lastElementChild()方法返回null，即使div有預期的子節點節點。代碼如下，我已經評論了問題出在哪裏。任何幫助，將不勝感激！

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    img {position: absolute} 
    div {position: absolute; height: 500px; width: 500px} 
    #right {border-left: solid black; left: 500px} 
</style> 

<script> 

<!-- everything here works fine --> 

    function generateFaces(){ 

     var theLeftSide = document.getElementById("left"); 

     var numberFaces = 5; 

     for (i = 0; i < numberFaces; i++){ 
      var random_x = Math.random()*400; 
      var random_y = Math.random()*400; 
      var image = document.createElement("img") 
      image.src = "smile.png"; 
      image.setAttribute("style","top: " + random_y + "px;" + "left: " + random_x + "px;"); 
      theLeftSide.appendChild(image); 
     } 

     var theRightSide = document.getElementById("right"); 

     leftSideImages = theLeftSide.cloneNode(true); 
     theRightSide.appendChild(leftSideImages); 
     theRightSide.lastChild.removeChild(theRightSide.lastChild.lastChild); 
    } 


</script> 

</head> 
<body onload = "generateFaces()"> 
    <h1> Game </h1> 
    <p> Instructions </p> 

    <div id = "right"></div> 

    <div id = "left"> </div> 

    <script> 

    <!-- problem script here --> 

    var temp = document.getElementById("left"); 
    console.log(temp); // displays <div> with its children <img> 

    var temp2 = temp.lastElementChild; 
    console.log(temp2); // returns null 

    </script> 

</body> 

</html>

來源

2017-08-06 thewayup

'generateFaces（）'後，你的名字叫做'的console.log （TE MP2）'。當你登錄時，'＃left'仍然是一個空的'div' – Thomas

人體的onload事件將不會開火，直到你的「問題腳本」的JavaScript後運行。

執行這裏的順序基本是：

h1，p，#left，並且#right獲得附加到DOM
腳本＃1運行，記錄空#left DIV和null lastElementChild。
body onload事件觸發和腳本＃2運行（generateFaces()函數）。此時，<img>標籤被插入到DOM中。

的解決方法是，確保腳本＃1運行後＃2：

<body onload="handleLoad()">

和JS：

function handleLoad() { 
    generateFaces() 
    logStuff() 
} 

function logStuff() { 
    var temp = document.getElementById("left"); 
    console.log(temp); // displays <div> with its children <img> 

    var temp2 = temp.lastElementChild; 
    console.log(temp2); // logs <img> 
}

它可能會出現，在控制檯中，#left在腳本＃1運行時有圖像。這只是控制檯的一個怪癖。實際日誌記錄異步發生，並且由於引用的變量在此期間發生變化，實際記錄的值與調用console.log()時的值不同。

您可以通過在generateFaces()函數調用改變一個setTimeout時間看到此行爲：

function generateFaces() { 
 

 
    var theLeftSide = document.getElementById("left"); 
 

 
    var numberFaces = 5; 
 

 
    for (i = 0; i < numberFaces; i++) { 
 
     var random_x = Math.random() * 400; 
 
     var random_y = Math.random() * 400; 
 
     var image = document.createElement("img") 
 
     image.src = "smile.png"; 
 
     image.setAttribute("style", "top: " + random_y + "px;" + "left: " + random_x + "px;"); 
 
     theLeftSide.appendChild(image); 
 
    } 
 

 
    var theRightSide = document.getElementById("right"); 
 

 
    leftSideImages = theLeftSide.cloneNode(true); 
 
    theRightSide.appendChild(leftSideImages); 
 
    theRightSide.lastChild.removeChild(theRightSide.lastChild.lastChild); 
 
} 
 

 

 
var temp = document.getElementById("left"); 
 
console.log(temp); // displays <div> with its children <img> 
 

 
var temp2 = temp.lastElementChild; 
 
console.log(temp2); // returns null 
 

 

 
setTimeout(generateFaces, 250) // play with this value

img { 
 
    position: absolute 
 
} 
 

 
div { 
 
    position: absolute; 
 
    height: 500px; 
 
    width: 500px 
 
} 
 

 
#right { 
 
    border-left: solid black; 
 
    left: 500px 
 
}

<h1> Game </h1> 
 
<p> Instructions </p> 
 

 
<div id="right"></div> 
 

 
<div id="left"> </div>

哦，注意，您generateFaces()功能：當前創建DOM中的多個元素與相同的ID。你要解決這個問題。

來源

2017-08-06 00:53:02 bowheart

當正文被加載時，調用generateFaces（）函數。但您的第二個腳本在窗口加載時運行。

因此，當第二個腳本運行時沒有temp.lastElementChild並且您得到空值。

可以解決售後服務是這樣

<!DOCTYPE html> 
<html> 
<head> 
<style> 
img {position: absolute, height: 30px; width: 30px;} 
div {position: absolute; height: 500px; width: 500px} 
#right {border-left: solid black; left: 500px} 
</style> 
</head> 
<body onload = "generateFaces()"> 
<h1> Game </h1> 
<p> Instructions </p> 

<div id = "right"></div> 

<div id = "left"> </div> 
<script> 


function generateFaces() 
{ 
    console.log('y'); 
    var theLeftSide = document.getElementById("left"); 

    var numberFaces = 5; 

    for (i = 0; i < numberFaces; i++){ 
     var random_x = Math.random()*400; 
     var random_y = Math.random()*400; 
     var image = document.createElement("img") 
     image.src = "smile.png"; 
     image.setAttribute("style","top: " + random_y + "px;" + "left: " + random_x + "px;"); 
     theLeftSide.appendChild(image); 
    } 

    var theRightSide = document.getElementById("right"); 

    leftSideImages = theLeftSide.cloneNode(true); 
    theRightSide.appendChild(leftSideImages); 

    theRightSide.lastChild.removeChild(theRightSide.lastChild.lastChild); 

    loaded(); 

}

<script> 

function loaded() { 


var temp = document.getElementById("left"); 
console.log(temp); 

var temp2 = temp.lastElementChild; 
console.log(temp2);

}

來源

2017-08-06 01:17:16

lastElementChild返回null

回答

相關問題