how to manage input inside table and javascript

Question

I try to create a table with some input with type text. I create a javascript to calculate the grade but dun know something goes wrong. My html code is not working. Can any expert please check with me? I dun want jquery solution. It is not cover in my learning. Thanks in advance. BTW, please help me with something not too complicated. I am just new learner in html and javascript. Thanks again

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

You are missing a `}` after `return false;` – David Lavender Sep 24 '18 at 10:27 — David Lavender, Sep 24 '18 at 10:27
add d. still not working. Thanks for reply – TeoPeiShen Sep 24 '18 at 10:37 — TeoPeiShen, Sep 24 '18 at 10:37

score 2 · Answer 1 · answered Sep 24 '18 at 10:39

You are trying to get the input textbox value using name attribute. So, you need to use like as below

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

I'm not sure we can able to get the value using below code

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

But instead of this, we can use this code,

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

And you are missing a 's' in getElementsByName.

Example, document.getElementsByName("gradeP1")[0].value

Also, You are missing '}'.

Below I have added a fixed code. You have able to run this code directly.

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

Thanks,

@TeoPeiShen You can see the reference link here. [https://stackoverflow.com/questions/2980830/javascript-getelementbyname-doesnt-work#answer-2980838](https://stackoverflow.com/questions/2980830/javascript-getelementbyname-doesnt-work#answer-2980838) — Su Yatanar, Sep 24 '18 at 11:09
thnks. so getElementsByName returns plural instead of singular like Id so need [0]. — TeoPeiShen, Sep 24 '18 at 11:15
Yeah, For example, 4 input textbox having the same name, but we need second textbox values means, need to use [1]. If we need 3rd means, need to use [2]. It's counted with zero. — jawahar N, Sep 24 '18 at 11:21

Lafriakh · Answer 2 · 2018-09-24T11:05:40.947

First you need to move your script tag to the bottom before body tag. In your code you use getElementByName wich is not correct please use getElementsByName.

Also you forgot to close the if statement:

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.

Here a working example of your code

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

The alert function is not working. BTW, why use id instead of name? — TeoPeiShen, Sep 24 '18 at 10:50
it's not working because you already put an value in the fields you should use placeholder attribute instead. your data is unique and it's a good practice to use id for unique values, because the page should have one id with the same name. — Lafriakh, Sep 24 '18 at 10:56
OK. but my module din teach about id. Can i still use name and btw, how to use placeholder. Thanks for reply. — TeoPeiShen, Sep 24 '18 at 10:58
i update the snippet above, to make alert working you should use isNaN function because `parseFloat` function return NaN in false. — Lafriakh, Sep 24 '18 at 11:06

how to manage input inside table and javascript

2 Answers2