属性onclick = "function（）"が意図したとおりに機能していませんか？

Iveは問題を解決しようとしましたが、解決策が見つからないようです。あと数時間は、ボタンタグやonclick属性内に問題があることが判明しました（間違っている場合は修正してください）。属性onclick = "function（）"が意図したとおりに機能していませんか？

私の目的は、ボタンonxyz="..."スタイルのイベントハンドラを使用しない多くの理由の

<!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

つを介して、白のドットの動きは、あなたが彼らから呼び出す任意の関数がグローバルなければならないということであるようにすることです。あなたの機能は、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（）"が意図したとおりに機能していませんか？

答えて

関連する問題