正方形javascript程序的面积
以下是代码：正方形javascript程序的面积,javascript,html,area,Javascript,Html,Area,以下是代码： <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 clas
<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;
}
正方形的面积（a=s2）
边长：
回答：
功能区广场（侧面）
{
side=document.getElementById（“areaSquare”）.value；
var answer=侧面*侧面；
document.getElementById（“answerAreaSquare”）。值=答案；
}
我认为这是一个非常简单的程序，但我不知道为什么它不起作用。请提供帮助。您正试图从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>
演示
正方形的面积（a=s2）
边长：
答复:
//范围的生命
（功能（）{
//局部作用域函数
功能区广场（活动）{
var side=document.getElementById（“areaSquare”）.value；
var answer=侧面*侧面；
document.getElementById（“answerAreaSquare”）。值=答案；
event.preventDefault（）；
}
//用JS而不是HTML绑定的事件处理程序
document.querySelector（'form'）。addEventListener（'submit'，areaSquare）；
})();