Входные данные -> javascript и троичный оператор - PullRequest
Новая
       1

Входные данные -> javascript и троичный оператор

1 голос
/ 25 февраля 2020

Я сейчас изучаю 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 голос
/ 25 февраля 2020

Вам необходимо прикрепить событие к input. В этом примере событие 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>
0 голосов
/ 25 февраля 2020

Вам необходимо прикрепить функцию к входу ввода или изменить событие. Как показано ниже: 

userAge.addEventListener("input", verification, false);

Попробуйте.

0 голосов
/ 25 февраля 2020

Добавьте подтверждение в прослушиватель событий для ввода 

userAge.addEventListener("change", verification);

Таким образом, каждый раз, когда пользователь изменяет ввод, ваше приложение проверяет, не вписал ли он число больше 18. Возможно, вы также захотите проверить NaN ценности. Если вы хотите проверить проверку на лету, когда он печатает, используйте вместо этого событие «input»

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...