Почему IIFE может исправить «не может установить свойство„OnClick“нулевых»

-4

У меня есть блок кода в виде следующейПочему IIFE может исправить «не может установить свойство„OnClick“нулевых»

<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“ null ", потому что в то время, когда движок 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“нулевых»

ответ

Смежные вопросы