Question

我尝试创建一个带有一些文本类型输入的表。我创建了一个JavaScript以计算成绩，但不知道出了点问题。我的html代码无法正常工作。有什么专家可以向我咨询吗？我不想要jQuery解决方案。它不是我学习的内容。提前致谢。顺便说一句，请帮助我解决一些不太复杂的问题。我只是html和javascript的新手。再次感谢

<html>
<head>
<title>Grade Calculator</title>
<script type="text/javascript">
function calculate(){
var gradeP1 = parseFloat(document.getElementByName("tableG").gradeP1.value);
var gradeP2 = parseFloat(document.getElementByName("tableG").gradeP2.value);
var gradeP3 = parseFloat(document.getElementByName("tableG").gradeP3.value);
var gradeP4 = parseFloat(document.getElementByName("tableG").gradeP4.value);

var credit1 = parseFloat(document.getElementByName("tableG").credit1.value);
var credit2 = parseFloat(document.getElementByName("tableG").credit2.value);
var credit3 = parseFloat(document.getElementByName("tableG").credit3.value);
var credit4 = parseFloat(document.getElementByName("tableG").credit4.value);

if(gradeP1==null || gradeP2==null || gradeP3==null || gradeP4==null ||
credit1==null || credit2==null  || credit3==null || credit4==null)
{
alert ("Please Fill All Required Field");
return false;

var total1=gradeP1*credit1; 
var total2=gradeP2*credit2; 
var total3=gradeP3*credit3; 
var total4=gradeP4*credit4;

document.getElementByName("tableG").total1.value=total1;
document.getElementByName("tableG").total2.value=total2;
document.getElementByName("tableG").total3.value=total3;
document.getElementByName("tableG").total4.value=total4;

var totalC=credit1+credit2+credit3+credit4;
document.getElementByName("tableG").totalC.value=totalC;

var totalT=total1+total2+total3+total4;
document.getElementByName("tableG").totalT.value=totalT;

var averageC=totalC/4;
document.getElementByName("tableG").averageC.value=averageC;

var averageT=totalT/totalC;
document.getElementByName("tableG").averageT.value=averageT;
}
</script>
<noscript>
Your browser does not support JavaScript!
</noscript>
</head>
<body>
<table border="1" align="center" name="tableG">
<caption>GPA Calculator for 4 subjects(Please fill up all grade for 4 subjects)</caption>
<tr bgcolor ="yellow">
<th>Course Code</th>
<th>Course name</th>
<th>Grade</th>
<th>Grade Point</th>
<th>Credit Hours</th>
<th>[Credit Hours] X [Grade Points]</th>
</tr>
<tr>
<td><input type="text" name ="code1" value="must fill"/></td>
<td><input type="text" name="name1" value="must fill"/></td>
<td><input type="text" name="grade1" value="must fill"/></td>
<td><input type="text" name="gradeP1" value="must fill"/></td>
<td><input type="text" name="credit1" value="must fill"/></td>
<td><input type="text" size="100%" name="total1"/></td>
</tr>
<tr>
<td><input type="text" name ="code2" value="must fill"/></td>
<td><input type="text" name="name2" value="must fill"/></td>
<td><input type="text" name="grade2" value="must fill"/></td>
<td><input type="text" name="gradeP2" value="must fill"/></td>
<td><input type="text" name="credit2" value="must fill"/></td>
<td><input type="text" size="100%" name="total2"/></td>
</tr>
<tr>
<td><input type="text" name ="code3" value="must fill"/></td>
<td><input type="text" name="name3" value="must fill"/></td>
<td><input type="text" name="grade3" value="must fill"/></td>
<td><input type="text" name="gradeP3" value="must fill"/></td>
<td><input type="text" name="credit3" value="must fill"/></td>
<td><input type="text" size="100%" name="total3"/></td>
</tr>
<tr>
<td><input type="text" name ="code4" value="must fill"/></td>
<td><input type="text" name="name4" value="must fill"/></td>
<td><input type="text" name="grade4" value="must fill"/></td>
<td><input type="text" name="gradeP4" value="must fill"/></td>
<td><input type="text" name="credit4" value="must fill"/></td>
<td><input type="text" size="100%" name="total4"/></td>
</tr>
<tr bgcolor="pink" >
<td>&nbsp;</td>
<td colspan="3">Total</td>
<td><input type="text" name="totalC"/></td>
<td><input type="text" name="totalT"size="100%" /></td>
</tr>
<tr bgcolor="blue">
<td>&nbsp;</td>
<td colspan="3">GPA</td>
<td><input type="text" name="averageC"/></td>
<td><input type="text" name="averageT" size="100%"/></td>
</tr>
</table>

<br />
<input type="button" name="calculate" value="calculate" onclick="calculate()" />
<center>
<img src="image/grade.jpg" alt="Grade rating information" />
</center>
</body>

</html>

Answer 1

您正在尝试使用name属性获取输入文本框的值。因此，您需要像下面这样使用

var gradeP1 = parseFloat(document.getElementsByName("gradeP1")[0].value);

我不确定我们是否可以使用以下代码获取值

var gradeP1 = parseFloat(document.getElementByName("tableG").gradeP1.value);

但是，我们可以使用以下代码代替

var gradeP1 = parseFloat(document.getElementsByName("gradeP1")[0].value);

并且您在getElementsByName中缺少一个's'。

例如document.getElementsByName("gradeP1")[0].value

此外，您缺少'}'。

下面，我添加了固定代码。您可以直接运行此代码。

<html>
    <head>
        <title>Grade Calculator</title>
        <script type="text/javascript">
            function calculate(){
                var gradeP1 = parseFloat(document.getElementsByName("gradeP1")[0].value);
                var gradeP2 = parseFloat(document.getElementsByName("gradeP2")[0].value);
                var gradeP3 = parseFloat(document.getElementsByName("gradeP3")[0].value);
                var gradeP4 = parseFloat(document.getElementsByName("gradeP4")[0].value);

                var credit1 = parseFloat(document.getElementsByName("credit1")[0].value);
                var credit2 = parseFloat(document.getElementsByName("credit2")[0].value);
                var credit3 = parseFloat(document.getElementsByName("credit3")[0].value);
                var credit4 = parseFloat(document.getElementsByName("credit4")[0].value);

                if(gradeP1==null || gradeP2==null || gradeP3==null || gradeP4==null ||
                credit1==null || credit2==null  || credit3==null || credit4==null)
                {
                    alert ("Please Fill All Required Field");
                    return false;
                }

                var total1=gradeP1*credit1; 
                var total2=gradeP2*credit2; 
                var total3=gradeP3*credit3; 
                var total4=gradeP4*credit4;

                document.getElementsByName("total1")[0].value=total1;
                document.getElementsByName("total2")[0].value=total2;
                document.getElementsByName("total3")[0].value=total3;
                document.getElementsByName("total4")[0].value=total4;

                var totalC=credit1+credit2+credit3+credit4;
                document.getElementsByName("totalC")[0].value=totalC;

                var totalT=total1+total2+total3+total4;
                document.getElementsByName("totalT")[0].value=totalT;

                var averageC=totalC/4;
                document.getElementsByName("averageC")[0].value=averageC;

                var averageT=totalT/totalC;
                document.getElementsByName("averageT")[0].value=averageT;
            }
        </script>
        <noscript>
        Your browser does not support JavaScript!
        </noscript>
    </head>

    <body>
        <table border="1" align="center" name="tableG">
            <caption>GPA Calculator for 4 subjects(Please fill up all grade for 4 subjects)</caption>
            <tr bgcolor ="yellow">
                <th>Course Code</th>
                <th>Course name</th>
                <th>Grade</th>
                <th>Grade Point</th>
                <th>Credit Hours</th>
                <th>[Credit Hours] X [Grade Points]</th>
            </tr>
            <tr>
                <td><input type="text" name ="code1" value="5"/></td>
                <td><input type="text" name="name1" value="5"/></td>
                <td><input type="text" name="grade1" value="5"/></td>
                <td><input type="text" name="gradeP1" value="5"/></td>
                <td><input type="text" name="credit1" value="5"/></td>
                <td><input type="text" size="100%" name="total1"/></td>
            </tr>
            <tr>
                <td><input type="text" name ="code2" value="5"/></td>
                <td><input type="text" name="name2" value="5"/></td>
                <td><input type="text" name="grade2" value="5"/></td>
                <td><input type="text" name="gradeP2" value="5"/></td>
                <td><input type="text" name="credit2" value="5"/></td>
                <td><input type="text" size="100%" name="total2"/></td>
            </tr>
            <tr>
                <td><input type="text" name ="code3" value="5"/></td>
                <td><input type="text" name="name3" value="5"/></td>
                <td><input type="text" name="grade3" value="5"/></td>
                <td><input type="text" name="gradeP3" value="5"/></td>
                <td><input type="text" name="credit3" value="5"/></td>
                <td><input type="text" size="100%" name="total3"/></td>
            </tr>
            <tr>
                <td><input type="text" name ="code4" value="5"/></td>
                <td><input type="text" name="name4" value="5"/></td>
                <td><input type="text" name="grade4" value="5"/></td>
                <td><input type="text" name="gradeP4" value="5"/></td>
                <td><input type="text" name="credit4" value="5"/></td>
                <td><input type="text" size="100%" name="total4"/></td>
            </tr>
            <tr bgcolor="pink" >
                <td>&nbsp;</td>
                <td colspan="3">Total</td>
                <td><input type="text" name="totalC"/></td>
                <td><input type="text" name="totalT"size="100%" /></td>
            </tr>
            <tr bgcolor="blue">
                <td>&nbsp;</td>
                <td colspan="3">GPA</td>
                <td><input type="text" name="averageC"/></td>
                <td><input type="text" name="averageT" size="100%"/></td>
            </tr>
        </table>

        <br />
        <input type="button" name="calculate" value="calculate" onclick="calculate()" />
        <center>
            <img src="image/grade.jpg" alt="Grade rating information" />
        </center>
    </body>
</html>

谢谢

Answer 2

首先，您需要将script标签移动到body标签之前的底部。在您使用的代码中，getElementByName不正确，请使用getElementsByName。

您还忘记了关闭if语句：

if(gradeP1==null || gradeP2==null || gradeP3==null || gradeP4==null ||credit1==null || credit2==null  || credit3==null || credit4==null) {
    alert ("Please Fill All Required Field");
    return false;
} // you forgot to close the if here.

这是您的代码的有效示例

<html>
    <head>
        <title>Grade Calculator</title>
        <noscript>
            Your browser does not support JavaScript!
        </noscript>
    </head>
    <body>
        <table border="1" align="center" id="tableG">
            <caption>GPA Calculator for 4 subjects(Please fill up all grade for 4 subjects)</caption>
            <tr bgcolor ="yellow">
                <th>Course Code</th>
                <th>Course name</th>
                <th>Grade</th>
                <th>Grade Point</th>
                <th>Credit Hours</th>
                <th>[Credit Hours] X [Grade Points]</th>
            </tr>
            <tr>
                <td><input type="text" id ="code1" placeholder="must fillq"/></td>
                <td><input type="text" id="name1" placeholder="must fill"/></td>
                <td><input type="text" id="grade1" placeholder="must fill"/></td>
                <td><input type="text" id="gradeP1" placeholder="must fill"/></td>
                <td><input type="text" id="credit1" placeholder="must fill"/></td>
                <td><input type="text" size="100%" id="total1"/></td>
            </tr>
            <tr>
                <td><input type="text" id ="code2" placeholder="must fill"/></td>
                <td><input type="text" id="name2" placeholder="must fill"/></td>
                <td><input type="text" id="grade2" placeholder="must fill"/></td>
                <td><input type="text" id="gradeP2" placeholder="must fill"/></td>
                <td><input type="text" id="credit2" placeholder="must fill"/></td>
                <td><input type="text" size="100%" id="total2"/></td>
            </tr>
            <tr>
                <td><input type="text" id ="code3" placeholder="must fill"/></td>
                <td><input type="text" id="name3" placeholder="must fill"/></td>
                <td><input type="text" id="grade3" placeholder="must fill"/></td>
                <td><input type="text" id="gradeP3" placeholder="must fill"/></td>
                <td><input type="text" id="credit3" placeholder="must fill"/></td>
                <td><input type="text" size="100%" id="total3"/></td>
            </tr>
            <tr>
                <td><input type="text" id ="code4" placeholder="must fill"/></td>
                <td><input type="text" id="name4" placeholder="must fill"/></td>
                <td><input type="text" id="grade4" placeholder="must fill"/></td>
                <td><input type="text" id="gradeP4" placeholder="must fill"/></td>
                <td><input type="text" id="credit4" placeholder="must fill"/></td>
                <td><input type="text" size="100%" id="total4"/></td>
            </tr>
            <tr bgcolor="pink" >
                <td>&nbsp;</td>
                <td colspan="3">Total</td>
                <td><input type="text" id="totalC"/></td>
                <td><input type="text" id="totalT" size="100%" /></td>
            </tr>
            <tr bgcolor="blue">
                <td>&nbsp;</td>
                <td colspan="3">GPA</td>
                <td><input type="text" id="averageC"/></td>
                <td><input type="text" id="averageT" size="100%"/></td>
            </tr>
        </table>

        <br />
        <input type="button" id="calculate" value="calculate" onclick="calculate()" />
        <center>
            <img src="image/grade.jpg" alt="Grade rating information" />
        </center>

        <script>
            function calculate() {
                var table = document.getElementById('tableG');

                var gradeP1 = parseFloat(document.getElementById("gradeP1").value);
                var gradeP2 = parseFloat(document.getElementById("gradeP2").value);
                var gradeP3 = parseFloat(document.getElementById("gradeP3").value);
                var gradeP4 = parseFloat(document.getElementById("gradeP4").value);

                var credit1 = parseFloat(document.getElementById("credit1").value);
                var credit2 = parseFloat(document.getElementById("credit2").value);
                var credit3 = parseFloat(document.getElementById("credit3").value);
                var credit4 = parseFloat(document.getElementById("credit4").value);


                if(isNaN(gradeP1)|| isNaN(gradeP2) || isNaN(gradeP3) || isNaN(gradeP4) ||
                    isNaN(credit1) || isNaN(credit2)  || isNaN(credit3) || isNaN(credit4))
                {
                    alert ("Please Fill All Required Field");
                    return false;
                }

                var total1=gradeP1*credit1;
                var total2=gradeP2*credit2;
                var total3=gradeP3*credit3;
                var total4=gradeP4*credit4;

                document.getElementById("total1").value=total1;
                document.getElementById("total2").value=total2;
                document.getElementById("total3").value=total3;
                document.getElementById("total4").value=total4;

                var totalC=credit1+credit2+credit3+credit4;
                document.getElementById("totalC").value=totalC;

                var totalT=total1+total2+total3+total4;
                document.getElementById("totalT").value=totalT;

                var averageC=totalC/4;
                document.getElementById("averageC").value=averageC;

                var averageT=totalT/totalC;
                document.getElementById("averageT").value=averageT;

            }
        </script>
    </body>

</html>

如何管理表格和JavaScript中的输入

2 个答案: