Learning to pull data from a form with JS

Question

I'm teaching myself Javascript and for my first attempt at applying some concepts I made a basic number guessing game. I can't seem to get it to work though! Would someone mind taking a look and helping me figure out where I've gone wrong? It's very VERY basic and I'm sure there's some simple concept I haven't learned or have overlooked.

I'm trying to get the user to guess the number 6!

var myNum = 6;
var userGuess = document.getElementById("number").value;
if (userGuess == myNum) {
            writeMessage('statusArea', '<p>"You guessed my favorite number!"</p>');}
  if (userGuess > myNum) {
            writeMessage('statusArea', '<p>"Nope, too high, try again!"</p>');}
if (userGuess < myNum) {
            writeMessage('statusArea', '<p>"Nope, too low, try again!"</p>');}

<header>Can you guess my favorite number?</header>
<body>
  <form><label for="number">Enter a number here:</label><br>
    <input type="text" id="number" name="number"><br><input type="submit" value="Guess"></form> 
  
  <div id="statusArea"></div>
</body>

https://codepen.io/The_vagabond_blonde/pen/KKNgOrm

Welcome to Stack Overflow! The way SO works, your whole question (including any necessary code) has to be **in** your question, not just linked. Three reasons: People shouldn't have to go off-site to help you; some sites are blocked for some users; and links rot, making the question and its answers useless to people in the future. Please put a [mcve] **in** the question. More: [*How do I ask a good question?*](/help/how-to-ask) and [*Something in my web site or project doesn't work. Can I just paste a link to it?*](https://meta.stackoverflow.com/questions/254428/) — T.J. Crowder, Feb 14 '21 at 14:37
The code shown in the question is okay (though you might want to look at `else if` and can I ***strongly*** recommend not hiding closing `}` at the ends of the previous statement), so there must be more to your problem than this. For instance, how are you running the code above? Also, consider converting from string (the `value` property) to number explicitly rather than implicitly, [here are some options](https://stackoverflow.com/questions/28994839/why-does-string-to-number-comparison-work-in-javascript/28994875#28994875) for doing that. — T.J. Crowder, Feb 14 '21 at 14:38

score 0 · Accepted Answer · answered Feb 14 '21 at 14:53

There were multiple problems. But when using a submit button the form is submitted instead of the JS code. Thus you're not seeing the text defined in JS. Below is how to prevent that from happening. Also since you're working with numbers you need to make the value a number as by default it would be string. Then it is also recommended to use === over == as explained here

var myNum = 6;

document.getElementById('guessNumber').addEventListener('click', function(e) {
  e.prevenDefault; // Prevents submitting form
  var userGuess = Number(document.getElementById("number").value); // parse value to an actual number instead
  if (userGuess === myNum) { // use of === is recommended over == 
    writeMessage('statusArea', '<p>You guessed my favorite number!</p>');
  }


  // as userGuess is now a number you can check if it is more or less than
  if (userGuess > myNum) {
    writeMessage('statusArea', '<p>Nope, too high, try again!</p>');
  }
  
  if (userGuess < myNum) {
    writeMessage('statusArea', '<p>Nope, too low, try again!</p>');
  }
});

function writeMessage(domId, html)
{
  document.getElementById(domId).innerHTML = html
}

<header>Can you guess my favorite number?</header>
<body>
  <form>
    <label for="number">Enter a number here:</label><br>
    <input type="text" id="number" name="number"><br>
    <input type="button" id="guessNumber" value="Guess">
  </form> 
  
  <div id="statusArea"></div>
</body>

Wow thank you that's a great explanation! That's given me lots to research and practice, thank you so much :) — the_vagabond_blonde, Feb 14 '21 at 15:24
@the_vagabond_blonde If this answered your question you should mark it as the answer. That way it will also help others — SuperDJ, Feb 14 '21 at 17:45

Learning to pull data from a form with JS

1 Answers1