如何在單擊事件的函數中運行用戶輸入？

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

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/

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，那么在推動您的JavaScript投入生產之前，您需要Babel將ES6編譯為ES5，因為瀏覽器還不支持ES6）。