How can I get the value of an input element instead of `null`?

Question

When the user inputs any number, the number needs to be joined with the assigned text (in this case a URL). However it results in this: http://someurl.com/?value=null. Instead of null I expect the number the user inputted.

<head>
  <script type="text/javascript">
    var juarel = "http://someurl.com/?value=";
    var velju = document.getElementById('somenumber');
    var rezon = juarel.concat(velju);

    function print() {
      alert(rezon);
    }
  </script>
</head>
<body>
  <form>
    <input type="number" id="somenumber" value="">
    <button type="button" id="submit" name="button" onclick="print()">SUBMIT</button>
  </form>
</body>

[You want to use `juarel.concat(velju.value)` instead.](https://stackoverflow.com/questions/11563638/javascript-how-to-get-value-of-text-input-field) — castis, May 24 '17 at 17:09

score 2 · Accepted Answer · answered May 24 '17 at 17:10

2

Get the correct value from the HTML element calling .value. Then put the code to retrieve the value inside the function, otherwise you are reading the value at the beginning, and the element is empty. You have to read the value when you press the button:

<body>
<form>

<input type="number" id="somenumber" value="">
<button type="button" id="submit" name="button" 
onclick="print()">SUBMIT</button>

</form>
<script type="text/javascript">



function print () {
  var juarel = "http://someurl.com/?value=";
  var velju = document.getElementById('somenumber').value;

  var rezon = juarel.concat(velju);
  alert(rezon);
}
</script>
</body>

answered May 24 '17 at 17:10

quirimmo

9,800
3
30
45

This works with the addition of value property after getElementById. Thank you. – fedjedmedjed May 24 '17 at 17:15
You are welcome but there is also in my code the `.value` – quirimmo May 24 '17 at 17:16
Yes there is, but since I haven't copied your code but altered mine I had to add it. Cheers – fedjedmedjed May 24 '17 at 17:44

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

1st use .value as var velju = document.getElementById('somenumber').value

2nd wrap those into the function, so when you click, you get the current value, otherwise, it is always undefined since it is called on init.

  function print() {
    var juarel = "http://someurl.com/?value=";
    var velju = document.getElementById('somenumber').value;
    var rezon = juarel.concat(velju);
    alert(rezon);
  }

<script type="text/javascript">
  function print() {
    var juarel = "http://someurl.com/?value=";
    var velju = document.getElementById('somenumber').value;
    var rezon = juarel.concat(velju);
    alert(rezon);
  }
</script>


<body>
  <form>

    <input type="number" id="somenumber" value="">
    <button type="button" id="submit" name="button" onclick="print()">SUBMIT</button>

  </form>

How can I get the value of an input element instead of `null`?

2 Answers2