如何在 HTML 中显示 Javascript 变量？ [复制]答案

【问题标题】：How can I display a Javascript variable in HTML? [duplicate]如何在 HTML 中显示 Javascript 变量？ [复制]
【发布时间】：2013-04-05 00:26:17
【问题描述】：

我正在尝试将一些 javascript 添加到我的 HTML 文档中。在我的示例中，我想在 HTML 文本中显示 2 的正方形。应使用 js 脚本计算结果。例如，考虑一下：

在我的标题中：

<script type="text/javascript">
  var square = 2*2
</script>

在我的身体里：

<p>The square of 2 is <span id="square">.</span></p>

我必须添加什么才能使这项工作有效？

【问题讨论】：

另一方面，问初学者问题是可以的，但另一方面，几乎所有的 JavaScript 教程都涵盖了这一点。
@Juhana，第一个一方面是 :p 玩笑不谈，我认为 SO 不是用来回答这类问题的。
@LittleBobbyTables 声誉！新鲜的声誉！趁热来吧！
我输入了一页长的答案，它是 3 行代码和 100 行解释，然后因为问题已关闭而无法提交：p
@meagar 您仍然可以将其发布到其中一个副本。

标签： javascript html css

【解决方案1】：

您需要将跨度的innerHtml 设置为该值，因此它会是这样的：

<script type="text/javascript">
  var square = 2*2;
  document.getElementById('square').innerHTML = square;
</script>

但是您会希望将此脚本移动到写入跨度的位置之后，因为页面以程序方式呈现并且跨度尚不存在于头部。另一种选择是将代码包装在document.onload 函数中，例如：

<script type="text/javascript">
  document.onload(function() {
      var square = 2*2;
      document.getElementById('square').innerHTML = square;
  });
</script>

【讨论】：

此代码将显示错误，因为 innerHTML 不是函数。

【解决方案2】：

尝试使用 HTML 文档对象模型，例如，

function changeText(){
 var ans = 2*2;
document.getElementById("square").innerHTML = ans;
}

然后，将此javascript附加到诸如

之类的事件中

<body onload="changeText()">

【讨论】：