为什么我看不到输出?

问题描述:

我一直在学习javascript的基础知识。我写了一些代码来找到一个圆柱的体积。我的代码在W3C验证,但我看不到输出。你们能指导我走向正确的方向吗?谢谢!为什么我看不到输出?

<!DOCTYPE HTML> 
<html lang="en-us"> 
<head> 
    <meta charset="utf-8"> 
    <title> Variables and Arithmatic Example 1</title> 

     <script type="text/javascript"> 
     /*Input: Radius and height of a cylinder. 
     *Processing: Compute volume of cylinder. 
     *Output: Volume of cylinder. 
     */ 
     function volume() { 
     // Get the radius and height from user. 
      var r = parseInt(document.getElementById("radiusInputBox").value); 
      var h = parseInt(document.getElementById("heightInputBox").value); 

     //Compute volume of cylinder. 
      var v = Math.PI * r * r * h; 

     //Display volume to user. 
     document.getElementByID("volumeDiv").innerHTML = v; 
     }    
     </script> 
</head> 
<body> 
<h1>Cylinder Volume Calculator</h1> 
<h2>Please enter value for cylinder radius and height:</h2> 
    Radius <input type="text" id="radiusInputBox" size="3"><br> 
    Height <input type="text" id="heightInputBox" size="3"><br> 
<button type="button" onclick="volume()">Volume</button> 
<div id="volumeDiv"></div> 
</body> 

+0

浏览器的调试控制台是否显示任何脚本错误? – Jasen

+0

仅仅是为了将来的一个提示,W3C验证你的HTML *格式完整,而不是JavaScript。分析JavaScript代码的正确性不是微不足道的...... – tcooc

+1

你检查了你的控制台吗?在发布问题之前首先要检查。您应该看到抱怨'getElementByID'的错误未定义或不是函数。请参阅https://developer.chrome.com/devtools小代码评论评论:您的函数不接受任何输入,它访问DOM的输入,它也没有输出,它修改了DOM。教训是你应该有一个函数,它有两个值并返回音量。该功能可以在DOM之外进行测试,然后在代码中使用该功能,触及DOM –

document.getElementById,不document.getElementByID

/*Input: Radius and height of a cylinder. 
 
*Processing: Compute volume of cylinder. 
 
*Output: Volume of cylinder. 
 
*/ 
 
function volume() { 
 
    // Get the radius and height from user. 
 
    var r = parseInt(document.getElementById("radiusInputBox").value); 
 
    var h = parseInt(document.getElementById("heightInputBox").value); 
 

 
    //Compute volume of cylinder. 
 
    var v = Math.PI * r * r * h; 
 

 
    //Display volume to user. 
 
    document.getElementById("volumeDiv").innerHTML = v; 
 
}
<h1>Cylinder Volume Calculator</h1> 
 
<h2>Please enter value for cylinder radius and height:</h2> 
 
Radius 
 
<input type="text" id="radiusInputBox" size="3"> 
 
<br>Height 
 
<input type="text" id="heightInputBox" size="3"> 
 
<br> 
 
<button type="button" onclick="volume()">Volume</button> 
 
<div id="volumeDiv"></div>

你的document.getElementById,它需要的document.getElementById。