爲什麼IIFE可以解決「空的不能設置屬性的‘onClick’」

-4

<body id="main"> 
<h1>Matching Game</h1> 
<p>Click on the extra smile face on the left</p> 

<div id="left_side"></div> 
<div id="right_side"></div> 

<script>  
     var theLeftSide = document.getElementById("left_side"); 
     var theRightSide = document.getElementById("right_side"); 

     theLeftSide.lastChild.onclick = function nextLevel(event){    
      event.stopPropagation(); 
      quan+=5; 
      dele(); 
      generateFace(); 
      }  

</script> 
</body>

此行theLeftSide.lastChild.onclick的代碼塊將拋出一個錯誤，認爲「不能設置屬性的‘onClick’的空值「，因爲在JavaScript引擎掃描的時候，它還沒有任何孩子。這個問題可以通過把這個代碼放在$（document）.ready中解決，我知道。

不過，我也試過IIFE，這意味着包裝所有的代碼裏面

(function(){ 
    var theLeftSide = document.getElementById("left_side"); 
    var theRightSide = document.getElementById("right_side"); 

    theLeftSide.lastChild.onclick = function nextLevel(event){    
     event.stopPropagation(); 
     quan+=5; 
     dele(); 
     generateFace(); 
     }  
})()

，也看到問題是固定的，但不能找出原因。任何人都可以解釋我？

下面是完整的原代碼：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>part4</title> 
<style> 
div{ 
    position:absolute; 
    } 
#left_side{ 
    width:500px; height: 500px; border-right:#000 thin inset; 
    float: left; 
    } 
#right_side{ 
    width:500px; height: 500px; 
    float:left; left:500px; 
    } 
img{ 
    position: absolute; 
    } 
body{ 
    margin:0px; 
    } 

</style> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script> 
</head> 

<body onload="generateFace()" id="main"> 
<h1>Matching Game</h1> 
<p>Click on the extra smile face on the left</p> 

<div id="left_side"></div> 
<div id="right_side"></div> 

<script> 
var theLeftSide = document.getElementById("left_side"); 
var theRightSide = document.getElementById("right_side"); 
var e = event; 
var theBody= document.getElementById("main"); 

var post_left =0; 
var post_top=0; 
var quan = 4; 
function generateFace(){ 
    var i =0; 
    for(i=0; i<= quan; i++){ 
     var img = document.createElement("img"); 
     img.src="smile.png"; post_top=getRandom(); post_left=getRandom(); 
     img.style.top = post_top + "px"; 
     img.style.left = post_left +"px"; 
     theRightSide.appendChild(img); 
     var clone = img.cloneNode(true); 
     theLeftSide.appendChild(clone); 
     } 
     //var clone = theRightSide.cloneNode(true); 
     //theLeftSide.appendChild(clone); 
     var extra = document.createElement("img"); 
     extra.src="smile.png"; post_top=getRandom(); post_left=getRandom(); 
     extra.style.top = post_top + "px"; 
     extra.style.left = post_left +"px"; 
     theLeftSide.appendChild(extra); 
    }; 

function getRandom(){ 
    var i = Math.random() * 400 +1; 
    return Math.floor(i); 
    }; 
function dele(){ 
    while(theLeftSide.firstChild != null){ 
     theLeftSide.removeChild(theLeftSide.firstChild); 
     } 
    while(theRightSide.firstChild != null){ 
     theRightSide.removeChild(theRightSide.firstChild); 
     } 
    }; 
theBody.onclick = function gameOver() { 
    alert("Game Over!"); 
    dele(); 
    theBody.onclick = null; 
    theLeftSide.lastChild.onclick = null; 
}; 
function nextLevel(event){ 
    event.stopPropagation(); 
    quan+=5; 
    delse(); 
    generateFace(); 
    } 
</script> 
</body> 
</html>

與IIFE：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>part4</title> 
<style> 
div{ 
    position:absolute; 
    } 
#left_side{ 
    width:500px; height: 500px; border-right:#000 thin inset; 
    float: left; 
    } 
#right_side{ 
    width:500px; height: 500px; 
    float:left; left:500px; 
    } 
img{ 
    position: absolute; 
    } 
body{ 
    margin:0px; 
    } 

</style> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script> 
</head> 

<body id="main"> 
<h1>Matching Game</h1> 
<p>Click on the extra smile face on the left</p> 

<div id="left_side"></div> 
<div id="right_side"></div> 

<script> 
    (function(){ 
     var theLeftSide = document.getElementById("left_side"); 
     var theRightSide = document.getElementById("right_side"); 
     var e = event; 
     var theBody= document.getElementById("main"); 

     var post_left =0; 
     var post_top=0; 
     var quan = 4; 

     generateFace(); 

     function generateFace(){ 
      var i =0; 
      for(i=0; i<= quan; i++){ 
       var img = document.createElement("img"); 
       img.src="smile.png"; post_top=getRandom(); post_left=getRandom(); 
       img.style.top = post_top + "px"; 
       img.style.left = post_left +"px"; 
       theRightSide.appendChild(img); 
       var clone = img.cloneNode(true); 
       theLeftSide.appendChild(clone); 
       } 
       //var clone = theRightSide.cloneNode(true); 
       //theLeftSide.appendChild(clone); 
       var extra = document.createElement("img"); 
       extra.src="smile.png"; post_top=getRandom(); post_left=getRandom(); 
       extra.style.top = post_top + "px"; 
       extra.style.left = post_left +"px"; 
       theLeftSide.appendChild(extra); 
     }; 

     function getRandom(){ 
     var i = Math.random() * 400 +1; 
     return Math.floor(i); 
     }; 

     function dele(){ 
      while(theLeftSide.firstChild != null){ 
       theLeftSide.removeChild(theLeftSide.firstChild); 
       } 
      while(theRightSide.firstChild != null){ 
       theRightSide.removeChild(theRightSide.firstChild); 
       } 
      }; 
     theBody.onclick = function gameOver() { 
      alert("Game Over!"); 
      dele(); 
      //theBody.onclick = undefined; 
      //theLeftSide.lastChild.onclick = undefined; 
     }; 

     theLeftSide.lastChild.onclick = function nextLevel(event){    
      event.stopPropagation(); 
      quan+=5; 
      dele(); 
      generateFace(); 
      } 
    })(); 

</script> 
</body> 
</html>

來源

2015-12-26 Thắng PQ

好left_side'一直沒有孩子，因此是無效的元素'。把它放在一個IIFE應該沒有區別。 – epascarello

我知道它沒有孩子，所以它是空的。我的問題是爲什麼IIFE可以解決這個問題，就像放入$（document）.ready –

沒有它應該沒有區別... – epascarello

在原來的代碼，generateFace()被稱爲在頁面加載。在第二段代碼中，直接調用generateFace()。與IIFE沒有關係。請忘記它！ :-P這裏是您在各種情況下（打開你的瀏覽器控制檯前運行的片段）做一個簡化版本：

原始代碼（拋出一個TypeError）

console.log('attempting to initialize onclick'); 
 
document.getElementById('clickable').onclick = function() { 
 
    alert(this.id); 
 
}; 
 
console.log('onclick initialized successfully'); 
 

 
function gendiv() { 
 
    console.log('gendiv was called'); 
 
    document.body.innerHTML = '<div id="clickable">click me</div>'; 
 
}

<body onload="gendiv()"></body>

修改後的代碼

gendiv(); 
 

 
console.log('trying to initialize onclick'); 
 
document.getElementById('clickable').onclick = function() { 
 
    alert(this.id); 
 
}; 
 
console.log('onclick initialized successfully'); 
 

 
function gendiv() { 
 
    console.log('gendiv was called'); 
 
    document.body.innerHTML = '<div id="clickable">click me</div>'; 
 
}

<body></body>

來源

2015-12-26 16:06:28 leaf

你說得對。如果我換IIFE到只有theLeftside.lastChild.onclick，問題依然存在 –

@PQThắng這是我們正試圖從一開始就;-) – leaf

不好意思告訴你。我的英語不太好理解所有：D –

爲什麼IIFE可以解決「空的不能設置屬性的‘onClick’」

回答

相關問題