Getting number from user input: string is empty on submit?

Question

I'm stuck on a problem. I'm working on an exercise that generates a random integer between 1-10. The user will submit a number from 1-10 in the input box. If a match occurs, the user will get an alert notifying them of success.

I'm stuck on getting the number from the user input. I want to log to the console the form input, but for the life of me, I cannot figure this out. I've tried changing the form type="number", type="text" and tried using parseInt().

Anything glaring in my code?

function exerciseEight() {
  let input = document.querySelector("#number").value;
  let button = document.querySelector("#guess");
  let valueInt = parseInt(input, 10);
  let number = Math.ceil(Math.random() * 10);
  console.log(number);

  button.onclick = function() {
    console.log(input);
  };
}
exerciseEight();

<body>
  <div class="container container-fluid">
    <p><strong>Exercise Eight:</strong> Guess a Number between 1 and 10.</p>
    <form>
      <div class="form-group">
        <label for="number">Choose Number:</label>
        <input id="number" value="" type="text" name="number" />
    </form>

    <!-- Result will go here -->
    <p id="result"></p>
    </div>
    <button class="btn btn-dark" id="guess" type="submit">SUBMIT</button>
</body>

You need to set `input` in the `onclick` function. You're setting it when the page is loaded. — Barmar, Jun 22 '20 at 17:27

score 3 · Accepted Answer · answered Jun 22 '20 at 17:31

3

You need to get the input value when the user clicks. You're setting input and all the other variables that depend on it when the page is first loaded.

function exerciseEight() {
  let button = document.querySelector("#guess");
  let number = Math.ceil(Math.random() * 10);

  button.onclick = function() {
    let input = document.querySelector("#number").value;
    let valueInt = parseInt(input, 10);
    console.log(number, input);
  };
}
exerciseEight();

<body>
  <div class="container container-fluid">
    <p><strong>Exercise Eight:</strong> Guess a Number between 1 and 10.</p>
    <form>
      <div class="form-group">
        <label for="number">Choose Number:</label>
        <input id="number" value="" type="text" name="number" />
    </form>

    <!-- Result will go here -->
    <p id="result"></p>
    </div>
    <button class="btn btn-dark" id="guess" type="submit">SUBMIT</button>
</body>

answered Jun 22 '20 at 17:31

Barmar

741,623
53
500
612

Ah thanks! I knew it was something incredibly simple. I still had an issue with the page reloading every submit, until I removed the `form` tag from the HTML. Thank you. – Sackadelic Jun 22 '20 at 17:35
1

Or change the button to `type="button"` instead of the default `type="submit"` – Barmar Jun 22 '20 at 17:39
But since the button isn't inside the form, I don't think it should submit the form. – Barmar Jun 22 '20 at 17:42
For some reason, wrapping the input in the form tag reloaded the page every button click. – Sackadelic Jun 22 '20 at 17:45
1

See https://stackoverflow.com/questions/12319758/clicking-a-button-within-a-form-causes-page-refresh – Barmar Jun 22 '20 at 19:10

score 0 · Answer 2 · answered Jun 22 '20 at 17:31

The problem is that you are calling the function when the page loads, so it gets the values from the start, and doesn't change them at runtime when user enters input. You should call the function when user clicks the button.

function exerciseEight() {
  let input = document.querySelector("#number").value;
  let valueInt = parseInt(input, 10);
  let number = Math.ceil(Math.random() * 10);
  console.log(number);
}

  let button = document.querySelector("#guess");
  button.onclick = exerciseEight;

<body>
  <div class="container container-fluid">
    <p><strong>Exercise Eight:</strong> Guess a Number between 1 and 10.</p>
    <form>
      <div class="form-group">
        <label for="number">Choose Number:</label>
        <input id="number" value="" type="text" name="number" />
    </form>

    <!-- Result will go here -->
    <p id="result"></p>
    </div>
    <button class="btn btn-dark" id="guess" type="submit">SUBMIT</button>
</body>

Getting number from user input: string is empty on submit?

2 Answers2