Javascript 为什么onClick（）没有响应

所以我创建了一个简单的计算器来计算圆的面积和周长。我将代码存储在JavaScript中，并在

onClick（）

上调用它，但是

innerHtml

根本没有改变

计算（半径）{
cal_面积=字符串（Math.PI*（半径*半径））；
cal_周长=字符串（Math.PI*（半径*2））；
document.getElementById（“Area”）.innerHTML=cal_Area；
document.getElementById（“permiture”）.innerHTML=cal_permiture；
}

圈子




测试



测试

我建议您在单击

时，不要使用双引号将
“Radius”
键入
“Radius”
中的单引号。您需要在半径周围使用单引号，因为在单词calculate之前已经有了双引号，所以它缩短了。您也不需要在HTML中分配变量，只需传递document.getElementById（'Radius'）.value即可

您的代码中需要一些重构。例如，“双引号”和“赋值”。我已经修改了你的代码。看看下面


函数计算（）{
event.preventDefault（）；
var radius=document.getElementById（“radius”）.value；
var cal_area=字符串（Math.PI*（半径*半径））；
var cal_周长=字符串（Math.PI*（半径*2））；
document.getElementById（“Area”）.innerHTML=cal_Area；
document.getElementById（“permiture”）.innerHTML=cal_permiture；
}

圈子




测试



测试

函数计算（半径）{
event.preventDefault（）
var cal_area=字符串（Math.PI*（半径*半径））；
var cal_周长=字符串（Math.PI*（半径*2））；
var Area=document.getElementById（“Area”）.innerText=cal\u Area；
var Peri=document.getElementById（“周长”）.innerText=cal_周长；
};

圈子




测试



测试
您正在调用中执行赋值，这很可怕，必须在函数本身中完成

在本例中，我添加了“event.preventDefault（）”，这样您就可以停止页面刷新


函数计算（半径）{
var cal_area=字符串（Math.PI*（半径*半径））；
var cal_周长=字符串（Math.PI*（半径*2））；
document.getElementById（“Area”）.innerText=cal\u Area；
document.getElementById（“permiture”）.innerText=cal_permiture；
};

圈子




测试



测试
在
onclick
值内使用单引号
document.getElementById（'Radius'）
否则关闭属性并启动一个新属性。您也不需要
radius=
s，它是在函数定义中赋值的。另外，方法调用中的赋值操作是不必要的。只需传入半径值，或在方法中查找半径值。您是否在浏览器中尝试过调试控制台？感觉阻止innerHTML更改时出错。不要将提交输入与onclick混合使用。将您的函数附加到表单的提交事件，或者改为键入“按钮”。这是否回答了您的问题？
<input type="submit" value="Calculate" onclick="calculate(document.getElementById('Radius').value)">

function calculate(radius){
  cal_area = String(Math.PI * (radius * radius));
  cal_perimeter = String(Math.PI * (radius * 2));
  document.getElementById("Area").innerHTML = cal_area;
  document.getElementById("Perimeter").innerHTML = cal_perimeter;
}