Passing HTML input value as a JavaScript Function Parameter

Question

I am new to JavaScript, and I'm trying to figure out how to pass user-inputted values as a parameter to a JavaScript function. Here is my code:

<body>
<h1>Adding 'a' and 'b'</h1>
<form>
  a: <input type="number" name="a" id="a"><br>
  b: <input type="number" name="b" id="a"><br>
  <button onclick="add(a,b)">Add</button>
</form>
<script>
  function add(a,b) {
    var sum = a + b;
    alert(sum);
  }
</script>
</body>

possible duplicate of Javascript get input text value

Felix Kling
– Felix Kling

2014-01-28 06:26:51 +00:00
Commented Jan 28, 2014 at 6:26 — Felix Kling
– Felix Kling, Commented Jan 28, 2014 at 6:26

Ankit · Accepted Answer · 2021-02-11 13:14:59Z

41

One way is by using document.getElementByID, as below -

<body>
  <h1>Adding 'a' and 'b'</h1>

  a: <input type="number" name="a" id="a"><br> b: <input type="number" name="b" id="b"><br>
  <button onclick="add(document.getElementById('a').value,document.getElementById('b').value)">Add</button>

  <script>
    function add(a, b) {
      var sum = parseInt(a, 10) + parseInt(b, 10);
      alert(sum);
    }
  </script>
</body>

edited Feb 11, 2021 at 13:14

answered Jan 28, 2014 at 5:46

Ankit

1,51018 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cdalto Over a year ago

Okay, your solution is somewhat working. However, it is concatenating it as if a and b were strings. So sum is 12 instead of 3 where a=1 and b=2.

cdalto Over a year ago

var sum = Number(a) + Number(b);

dcodesmith · Accepted Answer · 2014-01-28 06:14:02Z

14

Firstly an elements ID should always be unique. If your element IDs aren't unique then you would always get conflicting results. Imagine in your case using two different elements with the same ID.

<form>
  a: <input type="number" name="a" id="a"><br>
  b: <input type="number" name="b" id="b"><br>
  <button onclick="add()">Add</button>
</form>

<script>
  function add() {
    var a = document.getElementById('a').value;
    var b = document.getElementById('b').value;

    var sum = parseInt(a) + parseInt(b);
    alert(sum);
  }
</script>

edited Jan 28, 2014 at 6:14

answered Jan 28, 2014 at 5:44

dcodesmith

9,6244 gold badges38 silver badges40 bronze badges

1 Comment

cdalto Over a year ago

Is there no way to actually pass these items as a parameter though?

Community · Accepted Answer · 2020-06-20 09:12:55Z

9

1 IDs are meant to be unique

2 You dont need to pass any argument as you can call them in your javascript

<form>
  a: <input type="number" name="a" id="a"><br>
  b: <input type="number" name="b" id="b"><br>
  <button onclick="add()">Add</button>
</form>
<script>
  function add() {
    var a = document.getElementById('a').value;
    var b = document.getElementById('b').value;
    var sum = a + b;
    alert(sum);
  }
</script>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 28, 2014 at 5:45

Voonic

4,7753 gold badges29 silver badges60 bronze badges

Comments

Community · Accepted Answer · 2020-06-09 09:13:08Z

2

   <form action="" onsubmit="additon()" name="form1" id="form1">
      a: <input type="number" name="a" id="a"><br>
      b: <input type="number" name="b" id="b"><br>
      <input type="submit" value="Submit" name="submit">
   </form>
  <script>
      function additon() 
      {
           var a = document.getElementById('a').value;
           var b = document.getElementById('b').value;
           var sum = parseInt(a) + parseInt(b);
           return sum;
      }
  </script>

edited Jun 9, 2020 at 9:13

CommunityBot

11 silver badge

answered Jan 21, 2015 at 9:26

parajs dfsb

1452 gold badges4 silver badges13 bronze badges

Comments

Moorthy GK · Accepted Answer · 2014-01-28 05:43:39Z

0

You can get the values with use of ID. But ID should be Unique.

<body>
<h1>Adding 'a' and 'b'</h1>
<form>
  a: <input type="number" name="a" id="a"><br>
  b: <input type="number" name="b" id="b"><br>
  <button onclick="add()">Add</button>
</form>
<script>
  function add() {
    a = $('#a').val();
    b = $('#b').val();
    var sum = a + b;
    alert(sum);
  }
</script>
</body>

answered Jan 28, 2014 at 5:43

Moorthy GK

1,3019 silver badges17 bronze badges

Comments

Shivam · Accepted Answer · 2014-01-28 05:45:44Z

0

Use this it will work,

<body>
<h1>Adding 'a' and 'b'</h1>
<form>
  a: <input type="number" name="a" id="a"><br>
  b: <input type="number" name="b" id="a"><br>
  <button onclick="add()">Add</button>
</form>
<script>
  function add() {
    var m = document.getElementById("a").value;
    var n = document.getElementById("b").value;
    var sum = m + n;
    alert(sum);
  }
</script>
</body>

answered Jan 28, 2014 at 5:45

Shivam

7303 gold badges10 silver badges25 bronze badges

Comments

Tim Li · Accepted Answer · 2014-01-28 05:44:26Z

-1

do you use jquery? if then:

$('#xx').val();

or use original javascript(DOM)

document.getElementById('xx').value

or

xxxform.xx.value;

if you want to learn more, w3chool can help you a lot.

answered Jan 28, 2014 at 5:44

Tim Li

2131 gold badge2 silver badges8 bronze badges

Comments

ghost · Accepted Answer · 2025-07-24 13:09:14Z

-1

<body>
  <h1>Adding 'a' and 'b'</h1>

 <input type="number"placeholder="a" id="a"><br>
 <input type="number" placeholder="b"  id="b"><br>
  <button >Add</button>
  <p class="result">result</p>

  <script>
  const a = document.querySelector('#a')
  const b = document.querySelector('#b')
  const add = document.querySelector('button')
  const result = document.querySelector('.result')

  add.addEventListener('click',function(){
    result.innerText = parseInt(a.value)+ parseInt(b.value)
  });
</script>
</body>

<body>

<div class="container" style="text-align: center; margin-top: 40px;">
     <h1 style="margin-top">Adding a and b</h1>

     <span>Enter a : </span> <input type="number"placeholder="a" id="a"><br><br>

    <span> Enter b : </span> <input type="number" placeholder="b"  id="b"><br><br>

      <button style="margin-top: 20px;">Add</button>

      <p class="result">result</p>

</div>



  <script>
  const a = document.querySelector('#a')
  const b = document.querySelector('#b')
  const add = document.querySelector('button')
  const result = document.querySelector('.result')

  add.addEventListener('click',function(){
    result.innerText = parseInt(a.value)+ parseInt(b.value)
  });
</script>
</body>

edited Jul 24 at 13:09

answered Jul 24 at 12:46

ghost

11 bronze badge

2 Comments

Mo_ Jul 24 at 13:35

Thank you for contributing to the Stack Overflow community. While this code may answer the question, might you please edit your post to add an explanation as to why or how it works as suggested by How do I write a good answer? Thanks!

Community Jul 24 at 14:25

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Quentin · Accepted Answer · 2025-07-24 14:31:52Z

-1

I like how most answers here don't know that javascript accepts every input as string unless we use parseInt. Yes, you can pass parameters in that way. Just a little modification

Var sum = parseFloat(a)+parseFloat (b);

edited Jul 24 at 14:31

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

answered Nov 1, 2022 at 4:46

Matthew Pavi

1

1 Comment

Quentin Jul 24 at 14:32

That has syntax errors in it, and a and b aren't strings (or numbers) so it doesn't make sense to pass them to parseFloat

Collectives™ on Stack Overflow

Passing HTML input value as a JavaScript Function Parameter

9 Answers 9

2 Comments

1 Comment

1 IDs are meant to be unique

2 You dont need to pass any argument as you can call them in your javascript

Comments

Comments

Comments

Comments

Comments

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

2 Comments

1 Comment

1 IDs are meant to be unique

2 You dont need to pass any argument as you can call them in your javascript

Comments

Comments

Comments

Comments

Comments

2 Comments

1 Comment

Linked

Related