how to take user input in html and set it as a variable in js?

Question

How would I take user input from html and set it to a variable in javascript?

This is what i'm trying to implement:

<p>
    <label>how old are you?</label>
     <form id="form" onsubmit="return false;">
      <input   style=position:absolute;top:80%;left:5%;width:40%; type="number" id="userInput">
      <input    style=position:absolute;top:50%;left:5%;width:40%; type="submit"    onclick="age()">
     </form>
    <script type="text/javascript">
      function age()
      {
        var input = document.getElementById("userInput");
        alert(input);
      }
      if(age<20)
      {
      alert(YOU ARE UNDER 20)
      }
    </script>
    </p>

use double quotes in your alert if your printing a string eg : alert("YOU ARE UNDER 20") — Arun pandian M
– Arun pandian M, Commented Jul 25, 2017 at 6:22
@T. Ou you are save the input value in variable input but you check with if(age<20).so you have to change if(input<20).also you have to print sting use double queotes. alert("YOU ARE UNDER 20") — Dhaarani
– Dhaarani, Commented Jul 25, 2017 at 6:32
@T. Ou also you saved input to the variable not the value. So you have to use below code document.getElementById("userInput").value; — Dhaarani
– Dhaarani, Commented Jul 25, 2017 at 6:36

Ryan Tsui · Accepted Answer · 2017-07-25 06:26:00Z

2

With pure JavaScript:

var input = document.getElementById('userInput');
alert(input.value);

With jQuery:

var input = $('#userInput');
alert(input.val());

To achieve what you want:

function age() {
  var input = document.getElementById('userInput');
  var age = parseInt(input.value);

  if(age < 20) {
    alert('YOU ARE UNDER 20');
  }
}

edited Jul 25, 2017 at 6:26

answered Jul 25, 2017 at 6:18

Ryan Tsui

9485 silver badges14 bronze badges

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

Comments

Rick Bronger · Accepted Answer · 2017-07-25 06:30:01Z

There are some problems in your code. I will explain them. 1. You are creating a var input = document.getElementById("userInput"); But after that in your alert(input) it returns the entire object instead of the input value. 2. After that you are comparing Age wich is undefined because you didnt created var age = input;. If you compare input<20 it will work. In your alert you didnt use double quotes("") to create a string and alert that string. I hope its more clear now.

     function age()
      {
        var age = document.getElementById("userInput").value;
        alert(age);
      
      if(age<20) { alert("YOU ARE UNDER 20"); }
      }

<p>
    <label>how old are you?</label>
     <form id="form" onsubmit="return false;">
      <input   style=position:absolute;top:80%;left:5%;width:40%; type="number" id="userInput">
      <input    style=position:absolute;top:50%;left:5%;width:40%; type="submit"    onclick="age()">
     </form>
 </p>

Arun pandian M · Accepted Answer · 2017-07-25 06:21:03Z

1

use document.getelementbyId

or

document.getelementbyclassname

alert(document.getElementById("userinput"));

or

alert( document.getElementsByClassName("classname"));

answered Jul 25, 2017 at 6:21

Arun pandian M

89210 silver badges17 bronze badges

Comments

Dhaarani · Accepted Answer · 2017-07-25 06:34:29Z

1

Try below

function age()
      {
        var input = document.getElementById("userInput").value;      
      if(input<20) { alert("YOU ARE UNDER 20"); }
      }

<p>
    <label>how old are you?</label>
     <form id="form" onsubmit="return false;">
      <input type="number" id="userInput">
      <input    style=position:absolute;top:50%;left:5%;width:40%; type="submit"    onclick="age()">
     </form>
 </p>

edited Jul 25, 2017 at 6:34

answered Jul 25, 2017 at 6:26

Dhaarani

1,3701 gold badge13 silver badges24 bronze badges

Comments

Heru Prasetyo Utomo · Accepted Answer · 2017-07-25 06:21:10Z

0

what are you trying to achieve? if you want to check age then move if inside function

  function age()
  {
    var age = document.getElementById("userInput").value;
    if(age<20)
    {
      alert("YOU ARE UNDER 20")
    }
  }

answered Jul 25, 2017 at 6:21

Heru Prasetyo Utomo

1292 silver badges6 bronze badges

Collectives™ on Stack Overflow

how to take user input in html and set it as a variable in js?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related