How to get the input value for javascript

Question

I'm currently trying to get the input field's value of what the user chose as their number but i'm unable to for some reason.

I've already tried making it an id and then doing document.getElementById("testing").value but it didn't work.

Here's my current code:

<section class="generate">
  <div class="container">
    <h3>Generate a number between </h3>
    <form>
      First number
      <input id="testing" type="number" name="firstnumber" value="First number">
      <br> Second number
      <input type="number" name="secondnumber" value="Second number">
      <br>
      <input type="submit" value="Generate random number">
      <script>
        var secondNumber = document.getElementById('testing').value
        var randomNumber = Math.floor(Math.random() * secondNumber);
        console.log(randomNumber);
        console.log(secondNumber);
      </script>
    </form>
  </div>
</section>

Your code is running when the page first loads, not after the user enters something in the input field. Put the code in an event listener. — Barmar
– Barmar, Commented May 24, 2019 at 19:56
Currently, it is only being calculated on load. You need to add onsubmit to the form or onclick to the button — adiga
– adiga, Commented May 24, 2019 at 19:56

Barmar · Accepted Answer · 2019-05-24 19:59:26Z

You need to run the code in an event listener, not when the page first loads.

document.querySelector("form").addEventListener("submit", function(e) {
  e.preventDefault(); // prevent form from really submitting
  var secondNumber = document.getElementById('testing').value
  var randomNumber = Math.floor(Math.random() * secondNumber);
  console.log(randomNumber);
  console.log(secondNumber);
});

<section class="generate">
  <div class="container">
    <h3>Generate a number between </h3>
    <form>
      First number
      <input id="testing" type="number" name="firstnumber" value="First number">
      <br> Second number
      <input type="number" name="secondnumber" value="Second number">
      <br>
      <input type="submit" value="Generate random number">
    </form>
  </div>
</section>

Yunus Emrah Dursun · Accepted Answer · 2019-05-24 20:02:37Z

<section class="generate">
  <div class="container">
    <h3>Generate a number between </h3>
    <form onsubmit="return false">
      First number
      <input id="firstnumber" type="number" name="firstnumber" >
      <br> Second number
      <input id="secondnumber" type="number" name="secondnumber" >
      <br>
      <input type="submit" onclick="generate()" value="Generate random number">
      <script>
  function generate(){
        var firstnumber = document.getElementById('firstnumber').value
         var secondnumber =document.getElementById('secondnumber').value
        var randomNumber = Math.floor(Math.random() * secondnumber);
        console.log(randomNumber);
        console.log(firstnumber);
        console.log(secondnumber);}
      </script>
    </form>
  </div>
</section>

Collectives™ on Stack Overflow

How to get the input value for javascript

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related