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>

这是Darksouls中的粉丝专页项目。问的问题是“您获得了多少个灵魂？一旦用户提交了一个数字，它就应该将其取走并返回警告，提示“不是很多灵魂”或“超过9,000个”。

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!"]
  }

正如其他人所说，不需要for循环。
有人优雅提出的另一种语法称为ternary operator (?:)，这也很好。在Python中用print "Lots of souls!" if input >= 9000 else print "Not many souls"来写得更详细（与常规if / else相比，它的唯一优点是可以在一行上编写）。
抵消在if / else条件下检查的数值是接近要包含的值范围的错误方法。您要应用的逻辑是“用户输入的值等于还是大于9000 ”。因此，请勿将>=和<=使用不同的编号，而应将>=和<使用相同的编号。
也就是说，不要使用任何数字。 else就足够了，并且可以捕获您的逻辑条件的“或不”。
您的else 9000.1 >= input不是条件，它表示else {9000.1 >= input}，您可能是else if（但请参见上文-您不需要任何条件）。
与Python不同，JavaScript中的block被{}包围。虽然如果运行的代码仅是一个语句，则写单行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");

第二个无效。习惯从一开始就将花括号放在块上，以免在添加更多代码时忘记添加花括号。

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

Answer 4

单击按钮时，只需将输入值与值9000比较即可。您只需要5行（如果您跳过为输入创建变量的话，则更少），如下所示：

/* 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>

您可以使用ES6将其进一步缩短为仅两行（如果您跳过为输入创建变量的话，则可以缩短至更少）：

/* 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>

注意事项：如果您打算使用ES6，则由于浏览器尚不支持ES6，因此在将JavaScript投入生产之前，您需要Babel将ES6编译为ES5。

如何获得在单击事件功能中运行的用户输入？

4 个答案: