All geek questions in one place

Passing an HTML input value as a parameter to a JavaScript function

I'm new to JavaScript, and I'm trying to figure out how to pass user-entered 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>
+4
source share
7 answers

One way is to use document.getElementByID

<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) + parseInt(b);
    alert(sum);
  }
</script>
</body>
+10
source

Firstly, the identifier of the elements must always be unique. If item identifiers are not unique, you will always get conflicting results. Imagine that in your case two different elements with the same identifier are used.

<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>
+4
source

1 identifiers must be unique

2 You do not need to pass any arguments, 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>
+2
source

You can get the values ​​with ID. But IDmust 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>
0
source

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 know more, w3chool can help you.

0
source

Use it, 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>
0
source 
   <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 = a + b;
           return sum;
      }
  </script>
0
source

Source: https://habr.com/ru/post/1523999/

More articles:


All Articles