JavaScript - onclick事件沒有運行，代碼序列不正確

下面的代碼運行得儘可能警報（「點擊左邊的額外圖像」），然後它沒有做任何事情，點擊額外的圖像被添加到左div 。當點擊額外的圖像（id =「extraImage」）時，我希望JS將「extraImage」元素的顏色更改爲紅色。此外，我需要更改執行代碼的順序並運行警報（「點擊左側的額外圖像」）添加圖片後。任何想法不勝感激。JavaScript - onclick事件沒有運行，代碼序列不正確

<html> 
    <head> </head> 
    <body> 
     <div id="containerLeft"> 
     </div> 
     <div id="containerRight"> 
     </div> 

     <script> 
      var i = 1 
      var pocetSmilikov = prompt("enter number of smiley faces"); 
      alert("i will add" + pocetSmilikov); 
      while (i <= pocetSmilikov) 
      { 
       insert(); 
       i++; 
      } 

      insertExtraToLeft(); 

      function insert() { 
       var imgDestination = document.getElementById("containerRight"); 
       var imgAdded = document.createElement("img"); 
       imgAdded.src = "smiley.png"; 
       imgDestination.appendChild(imgAdded); 
       var left = Math.floor((Math.random() * 50) + 1) + "px"; 
       var top = Math.floor((Math.random() * 50) + 1) + "px"; 
       var imagestyle = imgAdded.style; 
       imagestyle.position = "relative"; 
       imagestyle.top = top; 
       imagestyle.left = left; 

       var the_node = document.getElementById("containerRight").lastChild; 
       var the_clone = the_node.cloneNode(true); 
       document.getElementById("containerLeft").appendChild(the_clone); 
      } 


      function insertExtraToLeft() { 
       var imgDestinationExtra = document.getElementById("containerLeft"); 
       var imgAddedExtra = document.createElement("img"); 
       imgAddedExtra.src = "smiley.png"; 
       imgAddedExtra.id = "extraImage" 
       imgDestinationExtra.appendChild(imgAddedExtra); 
       var left = Math.floor((Math.random() * 50) + 1) + "px"; 
       var top = Math.floor((Math.random() * 50) + 1) + "px"; 
       var imagestyle = imgAddedExtra.style; 
       imagestyle.position = "relative"; 
       imagestyle.top = top; 
       imagestyle.left = left; 
      } 

      alert("click on extra image on the left"); 

      extraImage.onclick = extraImgFound(); 


      function extraImgFound() { 
       document.getElementById("extraImage").style.color = "red"; 
      } 
     </script> 
    </body> 
</html>

來源

2016-02-05 whada

'extraImage.onclick = extraImgFound;'不調用函數（用'（）'），除非函數本身返回到綁定到該處理程序的功能。 –

我刪除了括號並重新運行，但仍然沒有任何反應，當我點擊已被代碼添加的額外圖像時... – whada

extraImage未定義？ – bestprogrammerintheworld

extraImage沒有在任何地方定義。在您的insertExtraToLeft()函數中添加imgAddedExtra.onclick = extraImgFound();。

嘗試：

function insertExtraToLeft() 
{ 
    var imgDestinationExtra = document.getElementById("containerLeft"); 
    var imgAddedExtra = document.createElement("img"); 
    imgAddedExtra.src = "smiley.png"; 
    imgAddedExtra.id ="extraImage" 
    imgDestinationExtra.appendChild(imgAddedExtra); 

    imgAddedExtra.onclick = extraImgFound(); 

    var left = Math.floor((Math.random() * 50) + 1)+"px"; 
    var top = Math.floor((Math.random() * 50) + 1)+"px"; 
    var imagestyle = imgAddedExtra.style; 
    imagestyle.position = "relative"; 
    imagestyle.top = top; 
    imagestyle.left = left; 
}

來源

2016-02-05 16:45:22 Rana

JavaScript - onclick事件沒有運行，代碼序列不正確

回答

相關問題