基本的HTML Javascript程序..这有什么问题?

时间:2015-03-29 18:04:30

标签: javascript html validation



        <!DOCTYPE html>
    
    <html>
    <head>
    <meta charset="utf-8">
    <title>circle area</title>
    <script>
    function start() { var button = document.getElementbyId("butto");
    button.addEventListener("click",area,false);}
    
    function area() {
    var input = document.getElementbyId( "radius" );
    var radius = parseFloat(input.value);
    var result = document.getElementbyId( "result" );
    result.innerHTML = "sphere volume is: "+spherevolume( radius );
    }
    function spherevolume( radius ) {
    return MATH.PI * MATH.pow(radius,2);}
    window.addEventListener( "load", start, false );
    </script></head>
    <body>
    <form action="#">
    <p><label>Radius:<input id="radius" type="number"></label>
    
    <input id="butto" type="button" value="click here"></p>
    </form>
    <p id="result"></p>
    </body>
    
    </html>
&#13;
&#13;
&#13;

请检查此基本脚本以从表单输入半径并打印圆的半径..我无法检查为什么它不起作用.. 也像W3C验证器一样,是否还有javascripts的人也可以评论代码的功能(我已经尝试了jslint但它无法告诉我有关代码性能的任何信息。)

3 个答案:

答案 0 :(得分:1)

  • getElementById应该有一个大写字母B
  • Math不应全部上限。

一旦修复了这些代码,代码就会起作用(尽管它计算的是圆的面积而不是球体的体积)。我建议从现在开始查看您的浏览器控制台,因为它很可能会将您指向问题所在的位置。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>circle area</title>
    <script>
        function start() {
            var button = document.getElementById("butto");
            button.addEventListener("click",area,false);
        }

        function area() {
            var input = document.getElementById( "radius" );
            var radius = parseFloat(input.value);
            var result = document.getElementById( "result" );
            result.innerHTML = "sphere volume is: "+spherevolume( radius );
        }
        function spherevolume( radius ) {
            return Math.PI * Math.pow(radius,2);
        }
        window.addEventListener( "load", start, false );
    </script>
</head>
<body>
    <form action="#">
        <p>
            <label>Radius:<input id="radius" type="number"></label>
            <input id="butto" type="button" value="click here">
        </p>
    </form>
    <p id="result"></p>
</body>
</html>

答案 1 :(得分:0)

首先,您的代码在获取ID并使用我在下面标记的数学函数时会出现一些拼写错误:

<html>
<head>
<meta charset="utf-8">
<title>circle area</title>
<script>
function start() {
var button = document.getElement*ById*("butto");
button.addEventListener("click",area);
}    
function area() {
var input = document.getElement*ById*( "radius" );
var radius = parseFloat(input.value);
var result = document.getElement*ById*( "result" );
result.innerHTML = "sphere volume is: "+ spherevolume( radius );
}
function spherevolume( radius ) {
return **Math.PI * Math.pow**(radius,2);
}
window.addEventListener( "load", start);
</script></head>
<body>
<form action="#">
<p><label>Radius:<input id="radius" type="number"></label>

<input id="butto" type="button" value="click here"></p>
</form>
<p id="result"></p>
</body>

</html>

如果你已经纠正了这些,它将会起作用。但如果文本框为空,它将记录一些错误。您可以使用“if”条件来检查值。

答案 2 :(得分:-1)

整个源代码中只有2个小错误:

您输入了:

getElementbyId 但它应该是 getElementById

另外

MATH 应为数学