事件處理onclick每個對象的身體響應

有一種模式遊戲，用戶應該從右側找到1張錯過的圖片，而位置顯示在左側，如果用戶猜對了，他們會進入下一個水平。事件處理onclick每個對象的身體響應

我的問題是，即使我點擊了正確的圖片，錯誤的選擇彈出窗口出現在第一次迭代後。

我試圖將body定義爲初始子，但仍然彈出顯示，無論選擇是正確還是錯誤。

var numberOfFaces = 5; 
 
var theLeftSide = document.getElementById("leftSide"); 
 
var theRightSide = document.getElementById("rightSide"); 
 
var theBody = document.getElementsByTagName("body")[0]; 
 

 
function generateFaces() { 
 
    for (var i = 0; i < numberOfFaces; i++) { 
 

 
    var createImg = document.createElement("IMG"); 
 
    var randPositionTop = Math.floor(Math.random() * 400); 
 
    var randPositionleft = Math.floor(Math.random() * 400); 
 
    createImg.setAttribute("src", "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png"); 
 
    createImg.style.top = randPositionTop + "px"; 
 
    createImg.style.left = randPositionleft + "px"; 
 
    theLeftSide.appendChild(createImg); 
 
    } 
 
    var leftSideImages = theLeftSide.cloneNode(true); 
 
    leftSideImages.removeChild(leftSideImages.lastChild); 
 
    theRightSide.appendChild(leftSideImages); 
 

 
    theLeftSide.lastChild.onclick = 
 
    function nextLevel(event) { 
 
     event.stopPropagation; 
 
     numberOfFaces += 5; 
 
     alert("Next level!"); 
 

 
     while (theLeftSide.firstChild) { 
 
     theLeftSide.removeChild(theLeftSide.firstChild); 
 
     } 
 
     generateFaces(); 
 
    } 
 

 
    theBody.onclick = 
 
    function gameOver() { 
 
     theBody.onclick = null; 
 
     theLeftSide.lastChild.onclick = null; 
 
     alert("Game Over!"); 
 
    }; 
 

 
}

#leftSide { 
 
    background-color: red; 
 
    position: absolute; 
 
    width: 500px; 
 
    height: 500px; 
 
    left: 50px; 
 
} 
 
#rightSide { 
 
    position: absolute; 
 
    left: 600px; 
 
    width: 500px; 
 
    height: 500px; 
 
    --border-left: solid 10px; 
 
} 
 
img { 
 
    position: absolute; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<link rel="stylesheet" href="style.css"> 
 

 
<body onload="generateFaces()"> 
 

 

 
    <h3>Matching Game</h3> 
 
    <h5>Please choose missed smile !</h5> 
 
    <div id="leftSide"> 
 
    </div> 
 

 
    <div id="rightSide"> 
 
    </div> 
 

 
    <script src="jsCode.js"></script> 
 
</body>

來源

2016-07-18 Hamed

請創建一個小提琴。 –

我不知道爲什麼，但img未加載：https：//jsfiddle.net/ychq5rkm/ – Hamed

這裏有一些錯誤，但我認爲阻止你的是'event.stopPropagation'是一個函數，應該調用就像這樣，像'event.stopPropagation（）'。此外，當您使用'theLeftSide.clone（）'時，您正在克隆包裝'div'，因此最終得到兩個ID爲「leftSide」的'div'，這是無效的。考慮抓住'theLeftSide.children'並克隆每個。 –

更新您的提琴。這是你想要的嗎？

https://jsfiddle.net/ychq5rkm/12/

具體而言，它使用在js而不是在HTML中的有載document.ready()。正如評論中提到的那樣，您需要實際撥打event.stopPropegation()，因爲它每次都會持續到身體並結束您的遊戲。

來源

2016-07-19 20:35:06 RayfenWindspear

謝謝，是的。但是，我仍然對'document.ready（）'而不是HTML背後的目的感到困惑，就好像遊戲在程序更改爲event.stopPropagation（）後沒有這行一樣工作。 – Hamed

遊戲並未在我的瀏覽器中加載html中的小提琴。它給了我沒有找到的功能，並會出錯。不知道爲什麼。在OSX上運行Chrome – RayfenWindspear

事件處理onclick每個對象的身體響應

回答

相關問題