輸入數據 -> javascript 和三元運算符
[英]Input data -> javascript and ternary operator
問題描述
我目前正在學習 JavaScript，我對我的代碼有什么問題有一些疑問。 我正在嘗試使用三元運算符和表單數據進行簡單的年齡檢查。 我試圖做到這一點，當表單的輸入低於 18 歲時，您會收到消息，當它結束時會出現按鈕。 謝謝！
var userAge = document.getElementById("ageInput"); const continueButton = document.getElementById("continue"); function verification() { continueButton.style.display = (userAge.value >= 18) ? "block" : "none"; } verification(); console.log(continueButton.style.display);
<html> <head> <title>test</title> <script src="app.js" defer></script> <style> #continue { display: none; } </style> </head> <body> <form > <span>please enter your age</span> <input type="number" id="ageInput"/> <input type="submit"> </form> <button id="continue">continue</button> </body> </html>
3 個解決方案
解決方案1
1 2020-02-25 06:31:41
您需要將事件附加到input 。 在這個例子中， keyup事件被添加到輸入中。 所以在keyup上檢查值是否大於18。注意parseInt和classList的使用
let conBtn = document.getElementById('continue'); document.getElementById('ageInput').addEventListener('keyup', function(e) { let ipVal = parseInt(e.target.value,10); ipVal > 18 ? conBtn.classList.remove('disableContinue') : conBtn.classList.add('disableContinue') })
.disableContinue { display: none; }
<form> <span>please enter your age</span> <input type="number" id="ageInput" /> <input type="submit"> </form> <button id="continue" class='disableContinue'>continue</button>
解決方案2
0 2020-02-25 06:26:02
將您的驗證添加到輸入的事件偵聽器
userAge.addEventListener("change", verification);
這樣，每次用戶更改輸入時，您的應用都會驗證他輸入的數字是否大於 18。您可能還想檢查 NaN 值。 如果您想在他打字時即時檢查驗證，請改用“輸入”事件
解決方案3
0 2020-02-25 06:34:42
您需要將函數附加到輸入的輸入或更改事件。 像下面這樣：
userAge.addEventListener("input", verification, false);
嘗試一下。
Javascript三元運算符在輸入標記中不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.