CODEWITHSUNDEEP
javascripterror-handling
Srivastav
Srivastav

Reputation: 359

Student average - No response in JavaScript

this code suppose to accept 4 subject marks from the user and calculate total and average. and it should display in the text Box.

When i click on Calculate(button) it should generate an alert dialog box and some calculation, but it's not. what is the error in it? what's wrong? i just cant figure out what's wrong in this code..everything looks Fine to me !!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ass_3 q_6</title>

<script type="text/javascript" language="javascript">
        function average()
        {
            alert("Hay");
            var s1=document.getElementById("math").value;
            var s2=document.getElementById("phy").value; 
            var s3=document.getElementById("che").value; 
            var s4=document.getElementById("bio").value; 
            var total=document.getElementById("tot"); 
            var ave=document.getElementById("avg");

            tot.value= (s1+s2+s3+s4);
            avg.value=(tot.value)/4;

        }

</script>

</head>
<body>
<h2 class="c1">Student Marks Average</h2>
<form name="myMarks" method="post" action="" id="myMarks">
<table align="middle" border="1">
<tr><td>Subjects</td><td>Marks Out of 100</td></tr>
<tr>
<td width="90px">Maths:</td>
<td><input type="text" id="math" name="maths" size="14" /></td>
</tr>
<tr>
<td>Physics:</td>
<td><input type="text" id="phy" name="physics" size="14" /></td>
</tr>
<tr>
<td>Chemistry:</td>
<td><input type="text" id="che" name="chemistry" size="14" /></td>
</tr>
<tr>
<td>Biology:</td>
<td><input type="text" id="bio" name="biology" size="14" /></td>
</tr>
<tr>
<td colspan="2" align="middle"><input type="button" value="Calculate" onclick="average()" /></td>
</tr>
<tr class="c2">
<td>Total:</td>
<td><input type="text" id="tot" name="total" size="14" /></td>
</tr>
<tr class="c3">
<td>Average:</td>
<td><input type="text" id="avg" name="average" size="14" /></td>
</tr>
</table>
</form>
</body>
</html>

Upvotes: 1

Views: 928

Answers (4)

Ankit Agrawal
Ankit Agrawal

Reputation: 6124

the problem in function name and some code please try this function

<script type="text/javascript" language="javascript">
function get_average()
{
alert("Hay");
var s1=parseInt(document.getElementById("math").value);
var s2=parseInt(document.getElementById("phy").value); 
var s3=parseInt(document.getElementById("che").value); 
var s4=parseInt(document.getElementById("bio").value); 
var total=document.getElementById("tot"); 
var ave=document.getElementById("avg");

tot.value= s1+s2+s3+s4;
avg.value=(tot.value)/4;

}

</script>

Upvotes: 1

jonhopkins
jonhopkins

Reputation: 3842

The problem is in these lines right here:

        var total=document.getElementById("tot"); 
        var ave=document.getElementById("avg");

        tot.value= (s1+s2+s3+s4);
        avg.value=(tot.value)/4;

They are causing your script to stop running, because tot and avg are not defined. Instead, you have total and ave. Make them match and it should run.

Edit: As AndyMac pointed out, another problem lies in the function having the same name as one of your inputs. Also, your variables are going to have string values of the numbers in the inputs, so your output will not be what you expect. To solve this, use parseInt to get integer types.

function calc_average()
{
    alert("Hay");
    var s1 = parseInt(document.getElementById("math").value);
    var s2 = parseInt(document.getElementById("phy").value);
    var s3 = parseInt(document.getElementById("che").value);
    var s4 = parseInt(document.getElementById("bio").value);
    var tot = document.getElementById("tot");
    var avg = document.getElementById("avg");

    tot.value = s1 + s2 + s3 + s4;
    avg.value = tot.value / 4;
}

Upvotes: 1

AndyMac
AndyMac

Reputation: 830

First, I'd highly recommend using something to debug with. I really like the Javascript Console in google chrome. The error that comes up is that your type "average" is not a function.

From that, you can see that maybe you have more than one thing defined as "average". In fact, you've got your input type named "average" as well.

Just change the name of your function or the name of your input type and it works perfectly!

For example, I changed to 

onclick="average_calc()"

and the function to 

function average_calc()

... and it worked fine.

("fine" meaning only that you got values in the text boxes ... you're not adding them yet, you're concatenating them, and you're selecting "tot" directly ... so still a few issues, but this should move you down the road)

Upvotes: 6

ffflabs
ffflabs

Reputation: 17491

Your function lacks a return statement. If you put a "return avg.value" in the end of it, then you could display it elsewhere after calling the function.

Upvotes: 0

Related Questions