使用KeyUp，如何在釋放回車鍵后獲取值？

Question

我正在嘗試創建一個檢查第一個文本框的keyup事件處理程序，以便在釋放enter時，它會計算用戶輸入的工作小時數。 如果用戶輸入的數字少於40，則需要輸入並將其乘以12美元，但如果用戶輸入的數字超過40（小時），則需要額外的小時數乘以18美元並增加480美元（12美元x 40）小時）並在第二個文本框中返回一個值。 我相信我只是使用錯誤的運算符或用於獲取Enter鍵的鍵盤的錯誤方法。 提前致謝

 let hours = document.getElementById("box1") let pay = document.getElementById("box2") document.addEventListener("keyup", press); function press() { if (event.key === "Enter") { let a = hours.value; if hours.value <= 40; let b = (a * 12); else hours.value >= 40; let c = [((a - 40) * 18) + 480] let c = pay.value = b; } 

 <p>Enter your hours:</p> <input type="number" id="box1"> <p>Your pay will appear here:</p> <input type="text" id="box2" disabled> 

Answer 1

你的JS有幾個語法問題，例如不匹配的大括號，錯誤位置的分號以及沒有接收事件作為press()函數的參數。

邏輯本身可以分為兩個階段，一個用於計算基本收益，另一個用於計算超過40小時水平的收益。 另請注意，您需要警惕輸入到字段中的無效值，盡管它是一個數字字段，但它仍然會接受一些字母字符，例如e 。 要解決這個問題，請確保在使用之前先收到parseInt()任何值。 嘗試這個：

 var hourBreak = 40; var baseRate = 12; var higherRateFactor = 1.5; let hourField = document.getElementById("box1") let payField = document.getElementById("box2") document.addEventListener('keyup', press); function press(e) { if (e.keyCode === 13) { var hours = parseInt(hourField.value, 10) || 0; var baseEarnings = Math.min(hours, hourBreak) * baseRate; var higherEarnings = Math.max(hours - hourBreak, 0) * (baseRate * higherRateFactor) payField.value = baseEarnings + higherEarnings; } } 

 <p>Enter your hours:</p> <input type="number" id="box1"> <p>Your pay will appear here:</p> <input type="text" id="box2" disabled> 

Answer 2

您在代碼中使用的公式很好。 但是你的代碼幾乎沒有問題：if-else語句導致js錯誤; 你定義let c兩次，這也會導致錯誤。 您還會錯過按功能中的事件參數。 在下面的代碼段中，如果小時> 40，我會減少你的if-else語句以糾正b值。 我也刪除a變量。

 let hours = document.getElementById("box1"); let pay = document.getElementById("box2"); document.addEventListener("keyup", press); function press(event){ if (event.key === "Enter") { let b = (hours.value * 12); if (hours.value > 40) { b = [((hours.value-40) * 18) + 480] } pay.value = b; } } 

 <p>Enter your hours:</p> <input type="number" id="box1"> <p>Your pay will appear here:</p> <input type="text" id="box2" disabled>