0

描画ループ内から、定義されている HTML 値を取得すると、ループに入る前にそれをロードすると、それを忘れているように見えます。

これは私が絞り込んだコードです：

<html>
 <head>
  <script type="application/javascript">
    setInterval(draw,120);
    var value = document.getElementById("uniqueID").value

    function draw() {
      var canvas = document.getElementById('canvas');

      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        ctx.strokeText(value, 200, 200);
      }
    }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="500" height="500"></canvas>
   <input type="text" name="name" id="uniqueID" value="5" /><br>
 </body>
</html>

このように、コードは機能しません。テキストには、値が未定義であると書かれています。しかし、「var value = do ...」を描画関数の後に移動すると、それが取得されます。

描画関数の外で値を定義する必要があります。どうやってやるの？

ありがとう

4

2 に答える 2

1

しかし、「var value = do ...」を描画関数の後に移動すると、それが取得されます。

IDがuniqueIDの要素は描画関数の外には存在しないため、間違っていると思います。これは、uniqueID を持つ要素が存在する前にスクリプト ブロックが実行されるためです。

要素が作成された後にスクリプト ブロック全体を追加し、ドキュメント タイプの定義を追加できます。

<!DOCTYPE html>
<html>
 <head>
 </head>
 <body>
   <canvas id="canvas" width="500" height="500"></canvas>
   <input type="text" name="name" id="uniqueID" value="5" /><br>
  <script type="application/javascript">
    setInterval(draw,120);
    var value = document.getElementById("uniqueID").value

    function draw() {
      var canvas = document.getElementById('canvas');

      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        ctx.strokeText(value, 200, 200);
      }
    }
  </script>
 </body>
</html>
于 2013-05-27T08:26:20.047 に答える
1

体がまだロードされていないときに、頭の中でこれを行っています。

var value = document.getElementById("uniqueID").value

ボディ ロード関数内のすべてのコードをシフトする必要があります。

<html>
    <head>
        <script type="application/javascript">
        function OnLoad ()
        {
            setInterval(draw,120);
            var value = document.getElementById("uniqueID").value
            draw();
        }


        function draw() {
        var canvas = document.getElementById('canvas');

        if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        ctx.strokeText(value, 200, 200);
      }
    }
    </script>
 </head>
 <body onload="OnLoad()">
        <canvas id="canvas" width="500" height="500"></canvas>
        <input type="text" name="name" id="uniqueID" value="5" /><br>
 </body>
</html>
于 2013-05-27T08:29:33.583 に答える