我的Javascript程序计算学生平均分数时出错_Javascript_Html

我的Javascript程序计算学生平均分数时出错

javascript html

我的Javascript程序计算学生平均分数时出错,javascript,html,Javascript,Html,这是我用来计算的简单javascript程序。。当我在document.script中调用input（）函数或A（）函数时，单击其显示A未定义且input未定义。。有人能说出这是什么错误吗 <html> <head> <title></title> </head> <body onload="input()"> <script type="text/javascript"> var

这是我用来计算的简单javascript程序。。当我在document.script中调用input（）函数或A（）函数时，单击其显示A未定义且input未定义。。有人能说出这是什么错误吗

<html>
<head>
    <title></title>
</head>
<body onload="input()">
    <script type="text/javascript">
        var name=new Array(5);
        var roll=new Array(5);
        var m1=new Array(5);
        var m2=new Array(5);
        var m3=new Array(5);
        var total=new Array(5);
        var avg=new Array(5);
        var i=1;
    </script>
    <script type="text/javascript">
        function  A()
        {
            m1[i]=parseInt(document.getElementById('m1').value);
            m2[i]=parseInt(document.getElementById('m2').value);
            m3[i]=parseInt(document.getElementById('m3').value);
            avg[i]=(m1[i]+m2[i]+m3[i])/3;
            total[i]=(m1[i]+m2[i]+m3[i]);
            var mark="Avg="+avg[i]+"<br> Total="+total[i];
            document.getElementById("1").innerHTML=mark;
            i++;
        }
    </script>      
    <script>   
        function input()
        {
            document.write(" <form name='stud'> ");
            document.write(" Enter Name  :<input type='text' name='name'><br>");
            document.write(" Enter RollNo:<input type='number' name='no'><br>");
            document.write(" Enter mark 1:<input type='number' name='m1' id='m1'><br>");
            document.write(" Enter mark 2:<input type='number' name='m2' id='m2'><br>");
            document.write(" Enter mark 3:<input type='number' name='m3' id='m3'><br>");

            document.write("<input type='button' value='calculate' onclick='A();'>");
            document.write(" <br>");

            document.write("<input type='button' value='Enter For Next Student' onclick='input()'>");
            document.write(" <br><p id='1'></p>   ");  
        }
    </script>       
</body>
</html>


变量名称=新数组（5）；
var roll=新阵列（5）；
var m1=新阵列（5）；
var m2=新阵列（5）；
var m3=新阵列（5）；
var total=新阵列（5）；
var avg=新阵列（5）；
var i=1；
函数A（）
{
m1[i]=parseInt（document.getElementById（'m1'）.value）；
m2[i]=parseInt（document.getElementById（'m2'）.value）；
m3[i]=parseInt（document.getElementById（'m3'）.value）；
平均值[i]=（m1[i]+m2[i]+m3[i]）/3；
总[i]=（m1[i]+m2[i]+m3[i]）；
var mark=“Avg=“+Avg[i]+”
Total=“+Total[i]”；
document.getElementById（“1”）.innerHTML=mark；
i++；
}
函数输入（）
{
文件。填写（“”）；
文档。写入（“输入名称：
”；
文档。写入（“输入RollNo:
”；
文档。写入（“输入标记1:
”；
文档。写入（“输入标记2:
”；
文档。写入（“输入标记3:
”；
文件。填写（“”）；
文件。写（“
”）；
文件。填写（“”）；
文件。写（“
”；
}

请注意，代码是顺序的。例如，您试图在创建函数之前使用input（）。这就是为什么最好将代码包装在窗口中。onload=function（）{…}或$（document.ready）（function（）{…}。这样，在创建文档之前尝试使用它时就不会遇到问题。

正如罗杰所说，某些浏览器在遇到document.write时宁愿扔掉整个正文内容

因此，如果您希望继续使用代码，请将所有脚本移到head中，它应该可以工作。这样：

<head>
    <script type="text/javascript">
        var name = new Array(5);
        var roll = new Array(5);
        var m1 = new Array(5);
        var m2 = new Array(5);
        var m3 = new Array(5);
        var total = new Array(5);
        var avg = new Array(5);
        var i = 1;

        function A() {
            m1[i] = parseInt(document.getElementById('m1').value);
            m2[i] = parseInt(document.getElementById('m2').value);
            m3[i] = parseInt(document.getElementById('m3').value);
            avg[i] = (m1[i] + m2[i] + m3[i]) / 3;
            total[i] = (m1[i] + m2[i] + m3[i]);
            var mark = "Avg=" + avg[i] + "<br> Total=" + total[i];
            document.getElementById("1").innerHTML = mark;
            i++;
        }

        function input() {
            document.write(" <form name='stud'> ");
            document.write(" Enter Name  :<input type='text' name='name'><br>");
            document.write(" Enter RollNo:<input type='number' name='no'><br>");
            document.write(" Enter mark 1:<input type='number' name='m1' id='m1'><br>");
            document.write(" Enter mark 2:<input type='number' name='m2' id='m2'><br>");
            document.write(" Enter mark 3:<input type='number' name='m3' id='m3'><br>");
            document.write("<input type='button' value='calculate' onclick='A();'>");
            document.write(" <br>");
            document.write("<input type='button' value='Enter For Next Student' onclick='input()'>");
            document.write(" <br><p id='1'></p>   ");
        }
    </script>
</head>

<body onload="input()"></body>

</html>


变量名称=新数组（5）；
var roll=新阵列（5）；
var m1=新阵列（5）；
var m2=新阵列（5）；
var m3=新阵列（5）；
var total=新阵列（5）；
var avg=新阵列（5）；
var i=1；
函数A（）{
m1[i]=parseInt（document.getElementById（'m1'）.value）；
m2[i]=parseInt（document.getElementById（'m2'）.value）；
m3[i]=parseInt（document.getElementById（'m3'）.value）；
平均值[i]=（m1[i]+m2[i]+m3[i]）/3；
总[i]=（m1[i]+m2[i]+m3[i]）；
var mark=“Avg=“+Avg[i]+”
Total=“+Total[i]”；
document.getElementById（“1”）.innerHTML=mark；
i++；
}
函数输入（）{
文件。填写（“”）；
文档。写入（“输入名称：
”；
文档。写入（“输入RollNo:
”；
文档。写入（“输入标记1:
”；
文档。写入（“输入标记2:
”；
文档。写入（“输入标记3:
”；
文件。填写（“”）；
文件。写（“
”）；
文件。填写（“”）；
文件。写（“
”；
}

问题在于

document.write（）

完全破坏了整个HTML文档，包括某些浏览器中的JavaScript

它在铬合金中工作良好

然而，在IE中，如果您在网页上查看源代码，则如下所示：

 <form name='stud'>  Enter Name  :<input type='text' name='name'><br> Enter RollNo:<input type='number' name='no'><br> Enter mark 1:<input type='number' name='m1' id='m1'><br> Enter mark 2:<input type='number' name='m2' id='m2'><br> Enter mark 3:<input type='number' name='m3' id='m3'><br><input type='button' value='calculate' onclick='A();'> <br><input type='button' value='Enter For Next Student' onclick='input()'> <br><p id='1'></p>

输入名称：输入滚动编号：输入标记1: 输入标记2: 输入标记3:

看到JavaScript了吗？没有，它不见了

编辑：

这是修复方法（有点）。问题是您需要在正文中添加HTML，而不是替换整个文档。此修订版在每次运行代码时向正文中添加包含新HTML的

但是，它仍然存在问题，这是由于多次单击导致元素具有重复id造成的。id在文档中应该是唯一的

<html>
    <head>
        <title></title>

        <script type="text/javascript">
            var name=new Array(5);
            var roll=new Array(5);
            var m1=new Array(5);
            var m2=new Array(5);
            var m3=new Array(5);
            var total=new Array(5);
            var avg=new Array(5);
            var i=1;

            function A() {
                m1[i]=parseInt(document.getElementById('m1').value);
                m2[i]=parseInt(document.getElementById('m2').value);
                m3[i]=parseInt(document.getElementById('m3').value);
                avg[i]=(m1[i]+m2[i]+m3[i])/3;
                total[i]=(m1[i]+m2[i]+m3[i]);
                var mark="Avg="+avg[i]+"<br> Total="+total[i];
                document.getElementById("1").innerHTML=mark;
                i++;
            }             

            function input() {
                var b = "";

                b = "<form name='stud'> ";
                b = b + " Enter Name  :<input type='text' name='name'><br>";
                b = b + " Enter RollNo:<input type='number' name='no'><br>";
                b = b + " Enter mark 1:<input type='number' name='m1' id='m1'><br>";
                b = b + " Enter mark 2:<input type='number' name='m2' id='m2'><br>";
                b = b + " Enter mark 3:<input type='number' name='m3' id='m3'><br>";
                b = b + "<input type='button' value='calculate' onclick='A();'>";
                b = b + " <br>";
                b = b + "<input type='button' value='Enter For Next Student' onclick='input();'>";
                b = b + " <br><p id='1'></p>   ";  

                var div = document.createElement('div');  // Create a <div> to contain the new HTML
                div.innerHTML = b;   // Set the HTML for the <div>
                document.body.appendChild(div);   // Add the new <div> to the body.
            }

            window.onload = input;  // This tells the browser to run input() when the page is done loading.

        </script>

    </head>

    <body>
    </body>
</html>


变量名称=新数组（5）；
var roll=新阵列（5）；
var m1=新阵列（5）；
var m2=新阵列（5）；
var m3=新阵列（5）；
var total=新阵列（5）；
var avg=新阵列（5）；
var i=1；
函数A（）{
m1[i]=parseInt（document.getElementById（'m1'）.value）；
m2[i]=parseInt（document.getElementById（'m2'）.value）；
m3[i]=parseInt（document.getElementById（'m3'）.value）；
平均值[i]=（m1[i]+m2[i]+m3[i]）/3；
总[i]=（m1[i]+m2[i]+m3[i]）；
var mark=“Avg=“+Avg[i]+”
Total=“+Total[i]”；
document.getElementById（“1”）.innerHTML=mark；
i++；
}             
函数输入（）{
var b=“”；
b=“”；
b=b+“输入名称：
”；
b=b+“输入滚动编号：
”；
b=b+“输入标记1:
”；
b=b+“输入标记2:
”；
b=b+“输入标记3:
”；
b=b+“”；
b=b+“
”；
b=b+“”；
b=b+“
”；
var div=document.createElement（'div'）；//创建包含新HTML的
div.innerHTML=b；//设置
document.body.appendChild（div）；//将新的添加到正文中。
}
window.onload=input；//这告诉浏览器在页面加载完成时运行input（）。

这应该行得通

<html>
<head>
    <title></title>
</head>
<body >
    <script type="text/javascript">
    var name=new Array(5);
    var roll=new Array(5);
    var m1=new Array(5);
    var m2=new Array(5);
    var m3=new Array(5);
    var total=new Array(5);
    var avg=new Array(5);
    var i=1;

    function  A()
    {
        m1[i]=parseInt(document.getElementById('m1').value);
        m2[i]=parseInt(document.getElementById('m2').value);
        m3[i]=parseInt(document.getElementById('m3').value);
        avg[i]=(m1[i]+m2[i]+m3[i])/3;
        total[i]=(m1[i]+m2[i]+m3[i]);
        var mark="Avg="+avg[i]+"<br> Total="+total[i];
        document.getElementById("result").innerHTML=mark;
        i++;
    }

    function reset()
    {
        name.value = "";
    }


    </script>
    <form name='stud'>
    Enter Name  :<input type='text' name='name' id="name"><br>
    Enter RollNo:<input type='number' name='no' id="rollNum"><br>
    Enter mark 1:<input type='number' name='m1' id='m1'><br>
    Enter mark 2:<input type='number' name='m2' id='m2'><br>
    Enter mark 3:<input type='number' name='m3' id='m3'><br>
    <input type='button' value='calculate' onclick="A()">
    <br>
    <input type='button' value='Enter For Next Student' onclick='reset()'>
    <br><p id='result'></p>
    </form>
</body>
</html>


变量名称=新数组（5）；
var roll=新阵列（5）；
var m1=新阵列（5）；
var m2=新阵列（5）；
var m3=n