正方形javascript程序的面积答案

【问题标题】：Area of a square javascript program正方形javascript程序的面积
【发布时间】：2014-10-30 21:33:56
【问题描述】：

下面是代码：

<h2>Area of a Square (A = s<sup>2</sup>)</h2>
    <form>
    <label class = "left">Side Length: </label>  <input id = "areaSquare" type = "text" class = "right" /> <br />
    <label class = "left">Answer: </label>  <input id = "answerAreaSquare" type = "text" class = "right" /> <br />
    <input type = "submit" value = "Submit" onclick = "areaSquare(); return false" />
    </form>

function areaSquare(side)
{
side = document.getElementById("areaSquare").value;
var answer = side*side;
document.getElementById("answerAreaSquare").value = answer;
}

我认为这是一个非常简单的程序，但我不知道为什么它不起作用。请帮忙。

【问题讨论】：

标签： javascript html area

【解决方案1】：

您正在尝试从 onclick 属性调用全局函数。浏览器对固有事件属性（如 onclick）的范围做了非常奇怪的事情，当在表单控件中使用时，会有局部变量通过它们的 id 引用所有表单控件。

由于您有一个 id 与全局函数匹配的元素，它会在局部范围内获取一个变量并屏蔽该函数。

您可以使用以下方法进行测试：

 onclick="alert(areaSquare); areaSquare(); return false"

快速而肮脏的技巧是重命名其中一个。

更好的解决方案是首先避免使用全局变量。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Demo</title>
</head>
<body>
<h1>Area of a Square (A = s<sup>2</sup>)</h1>
    <form>
      <label for="areaSquare">Side Length: </label>
      <input id="areaSquare"> <br>

      <label for="answerAreaSquare">Answer: </label>
      <output id="answerAreaSquare"></output> <br>

      <input type="submit" value="Submit">
    </form>
<script>
// IIFE for scope
(function () {

  // Locally scoped function
  function areaSquare(event) {
    var side = document.getElementById("areaSquare").value;
    var answer = side*side;
    document.getElementById("answerAreaSquare").value = answer;
    event.preventDefault();
  }

  // Event handler bound with JS instead of HTML
  document.querySelector('form').addEventListener('submit', areaSquare);
})();
  </script>

</body>
</html>

【讨论】：

很好，不知道它会创建一个覆盖它的全局变量（当它说对象不是函数时很明显，但我似乎无法直接从 window.areaSquare 访问它，所以它在哪里举行？） p.s.不知道为什么这个问题的所有反对意见：O
我忘记了内在事件属性的范围规则（主要是因为它们既愚蠢又令人困惑）。更正了答案中的解释。
现在说得通了，p.s。调用 window.areaSquare() 将是最简单的解决方案。