Question

<!DOCTYPE html>
<head>
<script>
var ctx = document.getElementById('ctx').getContext('2d');
</script>
</head>
<body>
<canvas id="ctx" style="border: 1px solid #000000;"></canvas>
</body>

这将返回：

0: Unable to get property 'getElementById' of undefined or null reference

任何理由吗？

Answer 1

添加最小的HTML文档来容纳画布。

错误是说它无法从未定义中获取getElementById，这意味着文档是未定义的。

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <canvas id="ctx" style="border: 1px solid #000000";></canvas>
    <script>var ctx = document.getElementById('ctx').getContext('2d');</script>
  </body>
</html>

以上功能在Safari和Firefox上均可正常运行

Answer 2

您的代码中的问题似乎是javascript试图通过id获取一个元素，该元素在javascript运行时不存在。因此，您要做的就是将javascript放到文档的末尾（用于一些简单的测试）。在对某些“真实”应用程序进行编码时，应将javascript包装在某种类型的加载处理程序中，以确保仅在文档完全加载后才将其触发。

<!DOCTYPE html>
<html>
<head>
	
</head>
<body>

<canvas id="ctx" width="150" height="150"></canvas>

<script>
  var ctx = document.getElementById('ctx').getContext('2d');
  console.log(ctx)
</script>

</body>
</html>

HTML Canvas-无法获取未定义或空引用的属性“ getElementById”

2 个答案: