为什么控制台不记录变量值？答案

【问题标题】：Why console not logging variable value?为什么控制台不记录变量值？
【发布时间】：2021-05-14 12:26:14
【问题描述】：

我正在尝试制作一个简单的 JS 画布画线程序。当有人第一次点击画布时，它应该存储它的 x 和 y 值（变量 x2 和 y2）。当有人第二次点击画布时，它应该将点击的 x 和 y 值存储在另一个变量中（变量 x1 和 y1）。我的问题是程序只存储第二次点击的值，控制台将变量记录为"undefined"。

所以总结一下，当有人点击时，x2 和y2 的值是"undefined"，而它们应该是一个数字。主要目标是获取 2 个 x 和 y 值并与它们保持一致。希望有人能帮忙。

这是我试过的代码：

<!DOCTYPE html>
<html>

<body>

  <canvas id="myCanvas" width="500" height="350" style="border:1px solid #d3d3d3;"></canvas><br>

  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");




    var a = true;

    function getMousePosition(canvas, event) {
      let rect = canvas.getBoundingClientRect();
      let x2;
      let y2;
      let x1;
      let y1;
      if (a) {
        let x2 = event.clientX - rect.left;
        let y2 = event.clientY - rect.top;
        a = false;
      } else {
        let x1 = event.clientX - rect.left;
        let y1 = event.clientY - rect.top;
        a = true;
        ctx.beginPath();



        ctx.moveTo(x2, y2);
        ctx.lineTo(x1, y1);

        ctx.stroke();
        ctx.closePath();
        console.log("Coordinate x1: " + x1,
          "Coordinate y1: " + y1);
        console.log("Coordinate x2: " + x2,
          "Coordinate y2: " + y2);

      }


    }

    let canvasElem = document.querySelector("canvas");

    canvasElem.addEventListener("mousedown", function(e) {
      getMousePosition(canvasElem, e);
    });
  </script>






</body>

</html>

-JSman225

【问题讨论】：

每次调用getMousePosition()，您都会定义一对新的x1/y1 和x2/y2 变量。并且，根据a 的值，另一组x1/y1 或x2/y2 变量。查看var 和let 定义的变量的不同范围。

标签： javascript canvas scope console

【解决方案1】：

问题是您在多个位置定义变量。为了稍后访问它们，您需要将它们存储在主脚本范围内，而不是像 a 变量那样的函数内。

看看这个。

<!DOCTYPE html>
<html>

<body>

  <canvas id="myCanvas" width="500" height="350" style="border:1px solid #d3d3d3;"></canvas><br>

  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");

    var x2, y2, x1, y1;


    var a = true;

    function getMousePosition(canvas, event) {
      let rect = canvas.getBoundingClientRect();

      if (a) {
        x2 = event.clientX - rect.left;
        y2 = event.clientY - rect.top;
        a = false;
      } else {
        x1 = event.clientX - rect.left;
        y1 = event.clientY - rect.top;
        a = true;
        ctx.beginPath();



        ctx.moveTo(x2, y2);
        ctx.lineTo(x1, y1);

        ctx.stroke();
        ctx.closePath();
        console.log("Coordinate x1: " + x1,
          "Coordinate y1: " + y1);
        console.log("Coordinate x2: " + x2,
          "Coordinate y2: " + y2);

      }


    }

    let canvasElem = document.querySelector("canvas");

    canvasElem.addEventListener("mousedown", function(e) {
      getMousePosition(canvasElem, e);
    });
  </script>






</body>

</html>

【讨论】：

好的！谢谢！我是 let 的新手，这非常有帮助！
我将接受答案，我只需要等待3分钟即可。
我在问题中添加了标签let、const、scope。这应该可以帮助人们轻松找到它。
好的！听起来很棒！

【解决方案2】：

您也在重新初始化事件侦听器中的变量。这就是为什么它在每个事件调用中都是未定义的

以下是您可以使用的更新代码


<!DOCTYPE html>
<html>

<body>

  <canvas id="myCanvas" width="500" height="350" style="border:1px solid #d3d3d3;"></canvas><br>

  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");



    let x2;
    let y2;
    let x1;
    let y1;
    var a = true;

    function getMousePosition(canvas, event) {
      let rect = canvas.getBoundingClientRect();
      if (a) {
        x2 = event.clientX - rect.left;
        y2 = event.clientY - rect.top;
        a = false;
      } else {
        x1 = event.clientX - rect.left;
        y1 = event.clientY - rect.top;
        a = true;
        ctx.beginPath();



        ctx.moveTo(x2, y2);
        ctx.lineTo(x1, y1);

        ctx.stroke();
        ctx.closePath();
        console.log("Coordinate x1: " + x1,
          "Coordinate y1: " + y1);
        console.log("Coordinate x2: " + x2,
          "Coordinate y2: " + y2);

      }


    }

    let canvasElem = document.querySelector("canvas");

    canvasElem.addEventListener("mousedown", function(e) {
      getMousePosition(canvasElem, e);
    });
  </script>






</body>

</html>

【讨论】：

也非常感谢您的回答。您的回答与@Nisanth Reddy 的类似，他先回答，所以我要给他支票，但您非常感谢！