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

Question

我已经让代码半工作了，但是当它工作时，它会产生一个无限循环。

我尝试比较用户输入的数据类型。我不能从概念上理解它，所以我在比较数字。

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>

​

这是为了“黑暗灵魂”的一个粉丝专页项目。问题是“你获得了多少灵魂?一旦用户提交了一个数字，它就应该接受这个数字，并返回一个带有”没有多少灵魂“或”那超过9000个“的警告。

Answer 1

不需要for循环，还需要在单击按钮后获取输入值

此外，将type="button"添加到您的按钮以允许在不提交表单的情况下单击它，如果这是您想要的

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>

​

编辑:正如msanford在评论中所说，if/else在javascript语法中显示了一点异常。这些语句等同于：

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

Answer 2

正如其他答案所指出的，循环不是必需的，您可以简单地比较数字。此外，不要忘记将输入中的字符串值转换为数字(例如，在执行比较之前使用parseInt )。此外，除非您希望浏览器提交表单，否则不要忘记在触发的事件中调用preventDefault。

​

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>

​

作为黑暗灵魂系列的粉丝，我忍不住要参与其中:)

Answer 3

因为您正在学习JavaScript，所以我将利用这个机会来做一个简短的代码回顾，特别是这个代码块：

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. 正如其他人所说，不需要for循环。
2. 其他一些人优雅地提出的语法被称为ternary operator (?:)，这也很好。在Python语言中，它被更冗长地写成print "Lots of souls!" if input >= 9000 else print "Not many souls" (与常规的if/else相比，它的唯一优点是它可以写在单个line).
3. Offsetting上，您在if/else条件中检查的数值是接近要包括的值范围的错误方式。您要应用的逻辑是“用户输入的值是否超过9000”。所以不要用不同的数字来使用>=和<=，用相同的数字来使用>=和<。
4. 也就是说，不要使用任何数字；else就足够了，并且捕获逻辑Python的“是否”不是一个条件，它的意思是代码，你的意思可能是<>=>D21else {9000.1 >= input} >(但请参见上面-你不需要任何Python，JavaScript中的<代码>C24被<代码>D25所包围。如果运行的代码只是一条语句，那么编写没有大括号的单行if/else是合法的，但这并不是惯用的做法，而且几乎总是不好的主意。

比较

​

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

​

使用

​

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

​

第二个不起作用。从一开始就习惯于用大括号括起代码块，这样在添加更多代码时就不会忘记添加它们。

1. alert["That's over 9,000!"]？你是说alert()吧。alert["That's over 9,000!"]在名为That's over 9,000!的全局变量alert上查找键，并且不调用函数。
2. 注意，不要使用alert()。习惯使用DevTools控制台、console.log()、console.dir() (用于对象)和调试器。当您的代码变得更加复杂，使用其他环境中常见的非常标准的调试方法时，它将为您提供更好的服务，而且它真的不难学。从这里开始https://developers.google.com/web/tools/chrome-devtools/javascript/