如何在单击事件的函数中运行用户输入？

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 (eg 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" 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/

Answer 4

Just compare the input value with the value 9000 when the button is click. All you need is 5 lines (or less if you skip creating a variable for input) like this:

 /* JavaScript */ var input = document.getElementById("takeinput"); function checkSoul() { alert( (input.value < 9000) ? "not enough souls" : "Too much souls" ); } document.getElementById("button").addEventListener("click", checkSoul); 

 <!-- HTML --> <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> 

---

You can shorten this further to just two lines (or less if you skip creating a variable for input) using ES6 like this:

 /* JavaScript */ var input = document.getElementById("takeinput"); document.getElementById("button").addEventListener("click", () => { alert( (input.value < 9000) ? "not enough souls" : "Too much souls" ) }); 

 <!-- HTML --> <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> 

NB If you are planning to use ES6, you'll need Babel to compile your ES6 to ES5 before pushing your JavaScript to production though since browsers don't support ES6 yet).