时间戳

首页 > 解决方案 > 我无法使用 JavaScript 访问画布上的输入值

javascript - 我无法使用 JavaScript 访问画布上的输入值

问题描述

我无法在我的 JavaScript 函数中获取输入语句的值，因为我希望我的输出在我的 html 画布部分，但它在我的画布以及 console.log 函数中也没有显示任何内容。请帮助解决这个问题。谢谢 ：）

  var x = document.getElementById("name").value;
console.log(x);

function myfunction() {
  var canvas = document.getElementById('page');
  var ctx = canvas.getContext("2d");
  ctx.font = "15px Arial";
  ctx.fillText(x, 10, 50);
} 
<!DOCTYPE html>
<html>

<head>
  <title>yoyo</title>
</head>

<body>
  <p>hi everyone!</p>
  <div>
    <label>Your text here-</label><br>
    <input type="text" name="name" id="name">
  </div>
  <div>
    <canvas id="page" width="200" height="300" style="border: solid; background: yellow;"></canvas>
    <button onclick="myfunction()">click</button>
  </div>
</body>

</html>

标签： javascripthtmlcssjsoncanvas

解决方案

下面的代码将使您的输入记录在控制台中。您需要在 myFunction 函数中包含控制台日志，这样只有在用户单击“单击”按钮后，输入的值才会打印到控制台/检查。你不应该创建一个需要用户输入的变量，并立即尝试访问它的值，因为当程序加载时，用户还没有在输入中输入任何值。所以下面，你的 x 变量是通过访问#id 创建的，用户填写输入字段，单击按钮，然后检查 x 变量的值，并打印到控制台。

var x = document.getElementById("name");

function myfunction() {
  console.log(x.value);
};

推荐阅读