屬性onclick =「function（）」沒有按預期運行？

我試着解決問題，我似乎找不到解決方案。幾個小時後，我發現問題出在button標籤或onclick屬性中（如果我錯了，糾正我）。屬性onclick =「function（）」沒有按預期運行？

我的目標是通過按鈕

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script type="text/javascript"> 
     window.onload = function() 
     { 
      var canvas =  document.getElementById("canvas"); 
      var ctx = canvas.getContext("2d"); 
      canvas.width = 345; 
      canvas.height = 410; 
      canvas.style.border = "1px solid white"; 

      var left = document.getElementById("left"); 
      left.onclick = "playerLeft()"; 

      var x = Math.round(canvas.width/2); 
      var y = Math.round(canvas.width/2); 
      var rectWidth = 5, rectHeight = 5; 
      var fps = 30, frames = 1000/fps; 
      var colour = "white"; 
      var trailColour = "blue"; 

      ctx.fillStyle = colour; 
      ctx.fillRect(x,y,rectWidth,rectHeight); 

      function playerLeft() { 
       ctx.fillStyle = trailColour; 
       ctx.fillRect(x,y,rectWidth,rectHeight); 
       x -= 6; 
       ctx.fillStyle = colour;; 
       ctx.fillRect(x,y,rectWidth,rectHeight); 
      } 
      function playerRight() { 
       ctx.fillStyle = trailColour; 
       ctx.fillRect(x,y,rectWidth,rectHeight); 
       x += 6; 
       ctx.fillStyle = colour; 
       ctx.fillRect(x,y,rectWidth,rectHeight); 
      } 
      function playerUp() { 
       ctx.fillStyle = trailColour; 
       ctx.fillRect(x,y,rectWidth,rectHeight); 
       y -= 6; 
       ctx.fillStyle = colour; 
       ctx.fillRect(x,y,rectWidth,rectHeight); 
      } 
      function playerDown() { 
       ctx.fillStyle = trailColour; 
       ctx.fillRect(x,y,rectWidth,rectHeight); 
       y += 6; 
       ctx.fillStyle = colour; 
       ctx.fillRect(x,y,rectWidth,rectHeight); 
      } 
     } 
    </script> 
</head> 
<body style="background-color: black"> 
    <canvas id="canvas"></canvas> 

    <div style="text-align: center; padding: 5px"> 
     <button id="left">Left</button> 
     <button id="up">Up</button> 
     <button id="down">Down</button> 
     <button id="right">Right</button> 
    </div> 
</body> 
</html>

來源

2017-02-28 EAT YOUR DAMN SANDWICH

其中一個原因是多方面的不使用onxyz="..."式的事件處理程序是，你從他們調用任何函數必須全局使白點移動。你的功能不是，他們是window.onload回調本地。

相反，只需直接分配的功能參考：

left.onclick = playerLeft;

來源

2017-02-28 16:52:01

謝謝！但是，你能告訴我爲什麼在添加括號的時候，缺少括號會使代碼功能發揮作用嗎？ –

@EATYOURDAMNSANDWICH：這不是根本性的區別。正如我上面所說的，基本的區別在於你是使用字符串還是函數引用。函數引用就是這樣：對函數的引用。如果我們在後面添加'（）'，我們將調用函數並將其返回值分配給'onclick'。 –

只需調用該函數沒有括號。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
    <script type="text/javascript"> 
 
     window.onload = function() { 
 
      
 
      var canvas = document.getElementById("canvas"); 
 
      var ctx = canvas.getContext("2d"); 
 
      canvas.width = 345; 
 
      canvas.height = 410; 
 
      canvas.style.border = "1px solid white"; 
 

 
      var left = document.getElementById("left"); 
 
      left.addEventListener("click", playerLeft); 
 

 
      var x = Math.round(canvas.width/2); 
 
      var y = Math.round(canvas.width/2); 
 
      var rectWidth = 5, rectHeight = 5; 
 
      var fps = 30, frames = 1000/fps; 
 
      var colour = "white"; 
 
      var trailColour = "blue"; 
 

 
      ctx.fillStyle = colour; 
 
      ctx.fillRect(x,y,rectWidth,rectHeight); 
 

 
      function playerLeft() { 
 
       ctx.fillStyle = trailColour; 
 
       ctx.fillRect(x,y,rectWidth,rectHeight); 
 
       x -= 6; 
 
       ctx.fillStyle = colour;; 
 
       ctx.fillRect(x,y,rectWidth,rectHeight); 
 
      } 
 

 
      function playerRight() { 
 
       ctx.fillStyle = trailColour; 
 
       ctx.fillRect(x,y,rectWidth,rectHeight); 
 
       x += 6; 
 
       ctx.fillStyle = colour; 
 
       ctx.fillRect(x,y,rectWidth,rectHeight); 
 
      } 
 

 
      function playerUp() { 
 
       ctx.fillStyle = trailColour; 
 
       ctx.fillRect(x,y,rectWidth,rectHeight); 
 
       y -= 6; 
 
       ctx.fillStyle = colour; 
 
       ctx.fillRect(x,y,rectWidth,rectHeight); 
 
      } 
 
      
 
      function playerDown() { 
 
       ctx.fillStyle = trailColour; 
 
       ctx.fillRect(x,y,rectWidth,rectHeight); 
 
       y += 6; 
 
       ctx.fillStyle = colour; 
 
       ctx.fillRect(x,y,rectWidth,rectHeight); 
 
      } 
 
     } 
 
    </script> 
 
</head> 
 
<body style="background-color: black"> 
 
    <canvas id="canvas"></canvas> 
 

 
    <div style="text-align: center; padding: 5px"> 
 
     <button id="left">Left</button> 
 
     <button id="up">Up</button> 
 
     <button id="down">Down</button> 
 
     <button id="right">Right</button> 
 
    </div> 
 
</body> 
 
</html>

來源

2017-02-28 17:01:36

屬性onclick =「function（）」沒有按預期運行？

回答

相關問題