JavaScript面积计算器

我在做一个简单的JSDOM练习。它应该乘以用户输入到输入框中的两个变量的面积。但就在我认为我完成它的时候，我的代码没有工作

var one=document.getElementById（“one”）.value；
var two=document.getElementById（“two”）.value；
var output=document.getElementById（“输出”）；
函数计算（）{
output.innerHTML=1*2；
}
var button=document.getElementById（“按钮”）；
button.onclick=calculate（）
矩形的面积计算器
边长1


边长2

提交

在dom元素上设置onclick事件或为其定义eventListener。还要获取

calculate

函数中输入的值，否则只获取一次

document.getElementById（“按钮”）.addEventListener（“单击”，函数）（）{
var one=document.getElementById（“one”）.value；
var two=document.getElementById（“two”）.value；
var output=document.getElementById（“输出”）；
output.innerHTML=1*2；
});
矩形的面积计算器
边长1



边长2

萨姆比特

首先，您必须在单击按钮时获取值。因此，将其移动到

calculate（）

函数中。其次，要单击

onClick

property，您必须分配一个函数。因此，不要执行它，只需分配函数，如

prop=funName

var一、二；
var output=document.getElementById（“输出”）；
函数计算（）{
one=document.getElementById（“one”）.value；//Change1
two=document.getElementById（“two”）.value；//Change1
output.innerHTML=1*2；
}
var button=document.getElementById（“按钮”）；
button.onclick=计算//更改2

矩形的面积计算器 边长1

边长2
提交

---

您的一些操作不正确，导致了一些错误：

将函数分配给按钮的

onclick

处理程序时，调用了

calculate

函数。在javascript中，函数是一等公民，代码

calculate

和

calculate（）

之间有很大的区别。向onclick处理程序赋值时，不要调用函数

在

calculate

函数中，您并没有得到元素

one

和

two

的

值。当调用它们时，它们没有获取当前值。将
.value
属性访问权放在您的计算函数中，它将按预期工作

var output=document.getElementById（“输出”）；
函数计算（）{
var one=document.getElementById（“one”）.value；
var two=document.getElementById（“two”）.value；
output.innerHTML=1*2；
}
var button=document.getElementById（“按钮”）；
button.onclick=计算
矩形的面积计算器
边长1


边长2

萨姆比特

解释代码无法工作的原因。当浏览器执行JS时，它会带来

one

和

two

的值。现在，您的

calculate

方法引用先前保存的值。因此，它没有引用单击按钮时的值

在calculate方法中引入调用以获取

one

和

two

的值，您应该可以开始了

var output=document.getElementById（“输出”）；
函数计算（）{
var one=document.getElementById（“one”）.value；
var two=document.getElementById（“two”）.value；
output.innerHTML=1*2；
}
var button=document.getElementById（“按钮”）；
button.onclick=计算
矩形的面积计算器
边长1



边长2

萨姆比特

好的，在一些答案中有很多误解，因此我将发布我的版本，并将我的评论转换为此答案

• 按钮必须是

  type=“button”

  ，或者使其提交并使用表单的提交处理程序-参见示例2

• 将变量放入函数中，以确保它们是新的，并且在运行时可用

• 从

  button.onclick=calculate（）中删除（）因为现在将计算结果分配给onclick而不是处理程序。在我的示例中，我使用了一个匿名函数
  

• 在页面onload中分配onclick，以确保在分配处理程序时按钮已呈现

window.onload=function（）{//页面已加载-匿名函数
document.getElementById（“按钮”）.onclick=function（）{//匿名函数
var one=document.getElementById（“one”）.value，//使用逗号分隔变量
two=document.getElementById（“two”）.value，
输出=document.getElementById（“输出”）；
output.innerHTML=1*2；
}
}

矩形的面积计算器 边长1

边长2
提交

---

但就在我认为我完成它的时候，我的代码没有工作。

这是什么意思？你的代码不起作用？您可以使用工具栏中的

将代码编辑为代码段吗？我为您创建了一个代码段。您还需要创建按钮

type=“button”

-我会将变量放入函数中，以确保它们在运行时是新的和可用的，并从

button.onclick=calculate（）中删除
（）

和最后在页面onload中分配onclick，因为您需要在每个calculate.element.onclick上获得新值，因此实际上更兼容-还要注意，您的sc