Question

我是web dev的新手，最近我学习了DOM。但是，我有一个困扰我的问题。我正在尝试制作一个简单的球体积计算器，用户可以通过输入半径来获得球体的体积。

这是代码。

HTML

Enter the sphere radius : <input type="number" id="radius"> 
<button id=>Calculate !</button>
<p>Therefore, the volume of sphere are: <span id="volsphere"></span> </p>

JS

var radius = document.querySelector("#radius");
var volsphere = document.querySelector("#volsphere");

volsphere.addEventListener("click",function(){
    //calculate the sphere volume
    var spherevolume = (4/3)  * Math.PI * Math.pow(radius,3);
    //put the text content into sphere volume
    volsphere.textContent = spherevolume ;
});

我尝试通过对控制台日志radius.value和spherevolume.value进行故障排除来解决这个问题。

Radius看起来很好并给我“3”但是球体积有

的错误信息

VM97：1未捕获的ReferenceError：未定义spherevolume at：1：1

那么，代码的哪一部分给出了这个错误？谢谢那些帮助的人

Answer 1

问题在于你将自己的HTMLElement乘以其值而不是它的值。因此，在半径之后添加.value，如下所示：

var spherevolume = (4/3)  * Math.PI * Math.pow(radius.value, 3);

不幸的是，这将返回一个字符串而不是一个数字，因此要将其转换为数字，您可以将其包装在parseInt()中或强制它转换为数字（即将其减去0）。

var spherevolume = (4/3)  * Math.PI * Math.pow(parseInt(radius.value), 3);

或者

var spherevolume = (4/3)  * Math.PI * Math.pow(radius.value - 0, 3);

另一方面，您应该在EventListener上添加button，而不是span。我假设你没有这样做，因为整个事情是一种形式，因此它重定向页面。您可以通过添加event.preventDefault();

来避免这种情况

var button = document.querySelector("#radius+button");

button.addEventListener("click", function(event){
    var spherevolume = (4/3)  * Math.PI * Math.pow(parseInt(radius.value), 3);
    volsphere.textContent = spherevolume;
    event.preventDefault();
});

无法从DOM中的输入文本中获取值

1 个答案: