Javascript Multiple Function isn't working

Question

I am using three javascript function to sum of input field values. But the first two function is working well but the third function is not working.

here is my javascripts:

 <script language="javascript">
 function addNumbers()
 {
 var val1 = parseInt(document.getElementById("ot").value);
 var val2 = parseInt(40);
 var ansD = document.getElementById("totalot");
 ansD.value = val1 * val2;
 }
 function addSecincome(){
 var val1 = parseInt(document.getElementById("totalot").value);
 var val2 = parseInt(document.getElementById("mc").value);
 var val3 = parseInt("1024");
 var ansD = document.getElementById("secincome");
 ansD.value = val3 * val1 + val2;
 }
 function addIncome(){
 var val1 = parseInt(document.form.getElementById("totalot").value);
 var val2 = parseInt("150"); 
 var ansD = document.form.getElementById("INC");
 ansD.value = val2 * val1 ; 
 }
 </script>
Here is my html codes:
 <tr height="20">
 <td height="20">BUYER</td>
 <td colspan="3"><input type="text" name="buyer" value=" " /></td>
 <td>OT</td>
 <td><input id="ot" type="text" name="ot" value="" /></td>
 <td><input type="text" id="totalot" name="totalot" onclick="javascript:addNumbers()" value="" /></td>
 <td>MC</td>
 <td><input id="mc" type="text" name="mc" value="" /></td>
 <td colspan="2"><input id="secincome" type="text" onclick="javascript:addSecincome()" name="2ndincome" value="" /></td>
 <td>SMV</td>
 <td><input type="text" name="smv" value= " " /></td>
 <td>O/QTY</td>
 <td><input type="text" name="oqyt" value=" " /></td>
 <td>TTL AVG</td>
 <td><input type="text" name="planeffi" value=" " /></td>
 </tr>
 <tr height="20">
 <td height="20">DAY INPUT</td>
 <td colspan="3"><input type="text" name="dayinput" value=" " /></td>
 <td colspan="2">PLAN HOUR</td>
 <td> <input type="text" name="planhour" vaue="10" /></td>
 <td colspan="2">PRO/LOSS</td>
 <td colspan="2"><input id="ploss" type="text" onclick="javascript:pp();" name="proloss" value="" /></td>
 <td>TGT</td>
 <td>T/TGT</td>
 <td>CUTTING</td>
 <td><input type="text" name="cutting" value=" " /></td>
 <td rowspan="2"><input type="text" name="ttlavg" value=" " /></td>
 <td>&nbsp;</td>
 </tr>

Though the functions syntex is same the third function is not working for me. I have tried with different input id but it is not working for me. but the first two function is working . I don't understand about this issu and i don't have this kind of problem before.

Need your help thanks.

• Tibos: How did you think about using document.form.getElementById and not realize it is the difference between your working functions and your failing one? Also, checking your console for errors should be the first step you take when things don't work the way you want them.
• Slicedpan: I don't see where you are calling the last function, the other two are click handlers for some table elements.
• Pierre Arlaud: Why in the world do you have to use parseInt to create an integer from... an integer? Or even from "150"?
• Anil Namde: getElementById on form object its method of document object. Ok ... and parsing 150 in Int ?

Answer 1

Change from document.form.getElementById("totalot"); to document.getElementById("totalot");

function addIncome() {
 var val1 = parseInt(document.getElementById("totalot").value); //Removed .form here
 var val2 = parseInt("150"); 
 var ansD = document.form.getElementById("INC"); //Removed .form here too
 ansD.value = val2 * val1 ; 
}

I've also just realised that your HTML code doesn't reference your addIncome() function anywhere? You need to attach it to an event in your HTML. Your other two functions run onclick of an input box.

<input id="secincome" type="text" onclick="javascript:addSecincome()" name="2ndincome" value="" />

I would suggest changing onclick to onchange. and then you need to add the following line onchange="addIncome()" to the right text box to run the function which doesn't work.

Also val2 = parseInt("150") - this is pointless you are creating a string and changing it to a number? - just write val2 = 150 by omitting the "" quotes around the value it will be a number. or even simpler ansD.value = 150 * val1;. No need to assign 150 to a variable

Can I also suggest looking at making your code more dynamic by creating one re-usable function by passing parameters into the function then you can re-use.

Answer 2

Try this instead!

function addIncome() {
 var val1 = parseInt(document.getElementById("totalot").value);
 var val2 = parseInt("150"); 
 var ansD = document.form.getElementById("INC");
 ansD.value = val2 * val1 ; 
}