繁体   English   中英

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

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

我已经将代码编写为半工作但是当它执行时它会创建一个无限循环。

我尝试比较用户输入的数据类型。 我无法在概念上绕过它,所以我正在比较数字。

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“的警报。

不需要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!")
}

正如其他答案所指出的那样,循环不是必需的,你可以简单地比较数字。 另外,不要忘记将字符串值从输入转换为数字(例如,在执行比较之前使用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> 

作为黑暗灵魂系列的粉丝无法参与:)

因为你正在学习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. 一些优雅提出的其他语法称为三元运算符( ?: :) ,这也很好。 在Python中,写得更详细,就像print "Lots of souls!" if input >= 9000 else print "Not many souls" print "Lots of souls!" if input >= 9000 else print "Not many souls" (其唯一优势在于常规if / else是它可以写​​在一行上)。
  3. 在if / else条件中偏移您检查的数值是错误的方法来接近要包括的值的范围。 要应用的逻辑是“什么是用户输入等于完了完了9000 或不 ”。 所以不要使用>=<=使用不同的数字,使用>=<使用相同的数字。
  4. 也就是说,不要使用任何数字; 一个else就足够了,捕捉你的逻辑条件的“与否”。
  5. 你的else 9000.1 >= input不是一个条件,它意味着else {9000.1 >= input} ,你可能意味着else if (但见上文 - 你不需要任何条件)。
  6. 与Python不同,JavaScript中的{}包围。 如果编写单行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上寻找一个键That's over 9,000! 而且不会调用函数。
  2. 请注意,不要使用alert() 习惯使用DevTools控制台, console.log()console.dir() (对象)和调试器。 当代码变得更复杂时,它将为您提供更好的服务,使用在其他环境中常见的非常标准的调试方法,而且实际上并不难理解。 从这里开始https://developers.google.com/web/tools/chrome-devtools/javascript/

只需在单击按钮时将输入值与值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,那么在推动您的JavaScript投入生产之前,您需要Babel将ES6编译为ES5,因为浏览器还不支持ES6)。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM