基本的HTML Javascript程序.这是怎么回事

Basic HTML Javascript program.. What is wrong with this?

本文关键字：怎么回事 程序 Javascript HTML      更新时间：2023-09-26

        <!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>

请检查这个基本脚本，从表格中输入半径并打印圆的半径。。我无法检查它为什么不起作用。。和W3C验证器一样，是否也有人支持javascript，也可以评论代码的功能（我尝试过jslint，但它无法告诉我任何关于代码性能的信息。）

  • 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>

首先，您的代码在获取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"条件来检查值。

整个源代码中只有两个小错误：

您已键入：

getElementbyId，但它应该是getElementbyId

还有

MATH应为MATH

相关文章：