Can u find the error in the script......I am not getting the result being displayed...

Question

1.00/5 (1 vote)

See more:

JavaScript

<script type="text/javascript">
function calculate()
{
	var num1=parseInt(document.getElementById("litres").value);
	var num2=parseInt(document.getElementById("fat").value);
	var num3=num1+num2;
	document.getElementById("total").innerHTML=num3;
}
</script>

HTML

Customer Id	:<input type="number" name="cid" size="5"><br>
No.Of .Litres	:<input type="number" id="litres" name="litres" size="5"><br>
Fat   		:<input type="number" id="fat" name="fat"size="5"><br>
Total		:<input type="number" id="total" size="5"><br>
<input type="submit" value="Submit" >		<input type="reset" value="Reset">

Posted 20-Dec-15 5:35am

Member 12218993

Updated 20-Dec-15 22:20pm

Richard MacCutchan

v3

Add a Solution

Comments

Kornfeld Eliyahu Peter 20-Dec-15 12:29pm

1. What have you expect?
2. What have you got?
3. What calculate() for if you never call it?

Sergey Alexandrovich Kryukov 20-Dec-15 12:54pm

You are perfectly right, but in this particular case, the answers to your questions are pretty much obvious and the code can be easily fixed — please see Solution 1.
—SA

enhzflep 20-Dec-15 12:35pm

Step 1. The submit button takes you away from the current page (or reloads it if no target address is given to submit the form to) Change this input from a type='submit' to a type='button'

Step 2. You need to actually invoke this function. You can do this while making the modification in step1.

-------------

Simply change <input type='submit' value='submit'/>
to
<input type='button' value='Do Calc' onclick='calculate()'/>

Sergey Alexandrovich Kryukov 20-Dec-15 12:53pm

No, it doesn't take anything "away". Without the form, it won't happen. But you are right, submit is useless here.
Your fixes are not enough: the code won't work yet, but they are correct.
I provided complete answer as Solution 1, please see.
—SA

enhzflep 20-Dec-15 13:05pm

Good catch mate, I'd forgotten that the behaviour of the submit input type changes depending on whether its in a form or not, thanks. :)

Oh yes, of course - I really must stop with these 20 hour days. Missed the fact that the answer was being assigned to the innerHTML of an element that doesn't (can't) have any.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2015-12-20T06:50:00

There are more bugs then code in your code :-)
Nothing in your HTML calls any functions.

First, fatal bugs: nothing calls calculate. You need to add id to your button, say id="button" and then you could write, in simplest case:

C#

var button = document.getElementById("button");
button.onclick = calculate;

Another bug is assignment to innerHTML in your last line. It should be val instead.

After these two fixes, the script will work immediately. After that, I suggest you rewrite the code the way in some reasonable ways. First of all, you don't need submit input; it is only needed for forms, only if you have the server part and want to perform HTTP request. In your pure-JavaScript code, use a usual button.

Don't use objects obtained via document.getElementById immediately. Return the objects and keep then for reuse. Initialize controls with some initial values.

Your "total" field doesn't have to be input. It's confusing that one actually can enter some data in it. Consider using any read-only element, such as p, div, span — anything (and than you would really use innerHTML). Or at least make it read-only input. Note that in desktop applications such "display-only" read-only input text boxes can be important to allow the users to put their content in the clipboard, but with HTML it's always possible for other elements, not only input ones.

—SA