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

我是web dev的新手，最近我学习了DOM。但是，我遇到了一个困扰我的问题。我正在尝试制作一个简单的球体积计算器，用户可以通过输入半径来获得球体积。无法从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>

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工作吧。

半径似乎是罚款，给我“3”，但球体体积有

VM97:1 Uncaught ReferenceError: spherevolume is not defined at :1:1

所以此错误信息，这部分代码是给了这个错误？谢谢那些帮助

来源

2017-07-13 Alan Koh W.T

你得点击收听的，你应该把它放在按钮。你没有点击跨度，是吗？ – Meggg

你的标记看起来无效'' 您应该为按钮的id属性填写值或完全删除属性。 – tommyO

@Megg我的错误。我应该把监听器事件放在按钮上 –

问题是，你乘以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);

在一个侧面说明，你应该在button添加EventListener而不是在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(); 
});

来源

2017-07-13 15:26:41

将值提取到变量中并对其执行'parseInt（）'是否值得？ –

@NathanMontez刚编辑我的答案 –

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

回答

相关问题