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
– David Lavender

2018-09-24 10:27:15 +00:00
Commented Sep 24, 2018 at 10:27 — David Lavender
– David Lavender, Commented Sep 24, 2018 at 10:27
add d. still not working. Thanks for reply

TeoPeiShen
– TeoPeiShen

2018-09-24 10:37:41 +00:00
Commented Sep 24, 2018 at 10:37 — TeoPeiShen
– TeoPeiShen, Commented Sep 24, 2018 at 10:37

jawahar N · Accepted Answer · 2018-09-24 10:39:19Z

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
thnks. so getElementsByName returns plural instead of singular like Id so need [0].
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.

Lafriakh · Accepted Answer · 2018-09-24 11:05:40Z

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?
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.
OK. but my module din teach about id. Can i still use name and btw, how to use placeholder. Thanks for reply.
i update the snippet above, to make alert working you should use isNaN function because parseFloat function return NaN in false.

Collectives™ on Stack Overflow

how to manage input inside table and javascript

2 Answers 2

5 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related