unable to pick the value from input fields through javascript

Question

<form id="form1">
        <table style="border:1px solid black ; font-family : Arial">
            <tr>
                <td>
                    First Number
                </td>
                <td>
                    <input id="Text1" type="text"/>
                </td>
            </tr>
            <tr>
                <td>
                    Second Number
                </td>
                <td>
                    <input id="Text2" type="text"/>
                </td>
            </tr>
            <tr>
                <td>
                   Resut
                </td>
                <td>
                    <input id="ResultArea" type="text"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input id="AddButton" type="button" value="Add" onclick="add()" />
                </td>
            </tr>
        </table>
        </form>

I am making simple program through JavaScript in which user are able to input 2 numbers and by clicking add button he will get the sum of those two inputs. For this purpose i have two input fields for first and second input, one input field is for display the result after sum and also have one add button. So here it is my java script function.

function add() {
                    var FirstNumber = document.getElementById("Text1").Value
                    var SecondNumber = document.getElementById("Text2").Value
                    document.getElementById("ResultArea").Value = FirstNumber + SecondNumber;
                }

I don't know whats the problem but it is not working anyways . when give input and click on add button , there is no response , no error , nothing ..

typo change `value` instead of `Value` .`V` not in caps .JavaScript case sensitive — prasanth, May 27 '17 at 12:07

score 1 · Accepted Answer · answered May 27 '17 at 12:10

typo change value instead of Value .V not in caps .Because JavaScript case sensitive .And you need parse the string using parseFloat() .Then only its performing the addition

function add() {
  var FirstNumber = document.getElementById("Text1").value
  var SecondNumber = document.getElementById("Text2").value
  document.getElementById("ResultArea").value = parseFloat(FirstNumber)+ parseFloat(SecondNumber);
}

<form id="form1">
  <table style="border:1px solid black ; font-family : Arial">
    <tr>
      <td>
        First Number
      </td>
      <td>
        <input id="Text1" type="text" />
      </td>
    </tr>
    <tr>
      <td>
        Second Number
      </td>
      <td>
        <input id="Text2" type="text" />
      </td>
    </tr>
    <tr>
      <td>
        Resut
      </td>
      <td>
        <input id="ResultArea" type="text" />
      </td>
    </tr>
    <tr>
      <td>
        <input id="AddButton" type="button" value="Add" onclick="add()" />
      </td>
    </tr>
  </table>
</form>

well yeah i have to do it with int or parse because value return the value in string format . well prasad can i do it with Number() method too ? — Faizan Naeem, May 27 '17 at 12:12
for my suggestion is better `parseFloat` instead of `number` .see [`whats the diff?`](https://stackoverflow.com/questions/11988547/what-is-the-difference-between-number-and-parsefloat) — prasanth, May 27 '17 at 12:19

score 0 · Answer 2 · answered May 27 '17 at 12:16

function add() {
                    var FirstNumber = document.getElementById("Text1").value
                    var SecondNumber = document.getElementById("Text2").value
                    document.getElementById("ResultArea").value = Number(FirstNumber) + Number(SecondNumber);
                }

unable to pick the value from input fields through javascript

2 Answers2