How Do I get the user input to be run in the function on click event?

Question

I have gotten the code to semi work but when it does it creates an infinite loop.

I tried comparing the datatype of the user input. I could not wrap my head around it conceptually so I am comparing numbers instead.

HTML:

let button = document.getElementById("button")

var input = document.getElementById("number_of_souls").getElementById("takeinput").value

let user_number = function() {

  for (let i = 1; i < 1; i++) {

    if (9000 <= input) {

      alert("Not many souls")
    } else 9000.1 >= input

    alert["That's over 9,000!"]
  }
}

button.addEventListener("click", user_number)

<div>
  <h1> How many Souls have you aquired? </h1>
  <form id="number_of_souls">
    <input id="takeinput"> Souls
    <button id="button">submit</button>
  </form>
</div>

This is for a fan-page project in Darksouls. The question asked is "How many souls have you acquired? Once the user submits a number it should take the number and return an alert with "Not Many souls" or "That's over 9,000".

Answer 1

No need for the for loop, also you need to get the input value after clicking the button

Also, add type="button" to your button to allow it to be clicked without submitting the form, if that's what you want

let button = document.getElementById("button")

let user_number=  function(){
  var input = document.getElementById("takeinput").value
  if (input<=9000) alert("Not many souls")
  else alert("That's over 9,000!")
}

button.addEventListener("click", user_number)

<div>
  <h1> How many Souls have you aquired? </h1>
  <form id="number_of_souls">
      <input id="takeinput"> Souls 
      <button id="button" type="button">submit</button>
  </form>
</div>

Edit: As msanford said in the comments, the if/else there shows a little bit of an anomaly in javascript syntax. Those statements are equivalent to:

if (input<=9000) {
  alert("Not many souls")
}
else {
  alert("That's over 9,000!")
}

Answer 2

As pointed out by other answers, the loop is not required, you can simply compare numbers. Also don't forget to convert a string value from the input to a number (e.g. by using parseInt before performing a comparison). Besides, unless you want a browser to submit the form, don't forget to call preventDefault on the fired event.

const user_number = (e) => {
  e.preventDefault();
  const value = parseInt(document.getElementById('takeinput').value, 10);
  const message = (9000 >= value) ? 'Not many souls' : 'Thats over 9,000!';
  alert(message);
}

const button = document.getElementById('button');
button.addEventListener('click', user_number);

<div>
  <h1> How many Souls have you aquired? </h1>
  <form id="number_of_souls">
      <input id="takeinput"> Souls 
      <button id="button">submit</button>
  </form>
</div>

As a fan of dark soul series couldn't keep from participating :)

Answer 3

Because you're learning JavaScript, I'm going to take this opportunity to do a short code review, specifically of this block:

for (let i = 1; i < 1; i++) {

    if (9000 <= input) {

      alert("Not many souls")
    } else 9000.1 >= input

    alert["That's over 9,000!"]
  }

1. As others have said, no need for a for loop.
2. The other syntax some have elegantly proposed is called a ternary operator (?:), which is also nice. In Python that's written more verbosely as print "Lots of souls!" if input >= 9000 else print "Not many souls" (whose only advantage over a regular if/else is that it can be written on a single line).
3. Offsetting the numeric value you check for in if/else conditions is the wrong way to approach what ranges of values to include. The logic you want to apply is "Is what the user entered equal to over over 9000 or not". So don't use >= and <= with a different number, use >= and < with the same number.
4. That said, don't use any number; an else is enough and captures the "or not" of your logical condition.
5. Your else 9000.1 >= input is not a condition, it means else {9000.1 >= input}, you probably meant else if (but see above - you don't need any condition).
6. Unlike Python, a block in JavaScript is surrounded by {}. While it is legal to write single-line if/else without braces if the code it runs is only a single statement, it's not idiomatic and almost always a bad idea.

Compare

const a = 1;
if (a > 0)
  console.log("Higher than 0");
else
  console.log("Not higher than 0");

with

const a = 1;
if (a > 0)
  console.log("Higher than 0");
  console.log("Another line");
else
  console.log("Not higher than 0");

That second one doesn't work. Get used to putting braces around blocks from the start, so that you don't forget to add them when you add more code.

1. alert["That's over 9,000!"] ? You mean alert(). alert["That's over 9,000!"] looks for a key on a global variable alert called That's over 9,000! and doesn't call a function.
2. On that note, don't use alert(). Get used to using the DevTools console, console.log(), console.dir() (for objects) and the debugger. It will serve you much better when your code gets more complex, uses pretty standard debugging methods common in other environments, and it's really not that hard to learn. Start here https://developers.google.com/web/tools/chrome-devtools/javascript/