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.

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. — Tibos
– Tibos, Commented Nov 29, 2013 at 9:22
I don't see where you are calling the last function, the other two are click handlers for some table elements. — Slicedpan
– Slicedpan, Commented Nov 29, 2013 at 9:22
Why in the world do you have to use parseInt to create an integer from… an integer? Or even from "150"? — Pierre Arlaud
– Pierre Arlaud, Commented Nov 29, 2013 at 9:23
getElementById on form object its method of document object. Ok ... and parsing 150 in Int ? — Anil Namde
– Anil Namde, Commented Nov 29, 2013 at 10:39

Community · Accepted Answer · 2017-05-23 12:05:05Z

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.

Mark Walters · Accepted Answer · 2013-11-29 09:27:32Z

0

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

edited Nov 29, 2013 at 9:27

Mark Walters

12.4k6 gold badges36 silver badges48 bronze badges

answered Nov 29, 2013 at 9:26

biplav

7911 gold badge6 silver badges13 bronze badges

Collectives™ on Stack Overflow

Javascript Multiple Function isn't working

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related