Как сбросить входное значение

Question

function ageVerify() {
    var age1 = Number(document.getElementById("age1").value);
    var voteable;
    if (isNaN(age1) || document.getElementById("demo1").innerHTML == "") {
        voteable = "Please type a number";
    } else {
        voteable = (age1 < 18) ? "Too young":"Old enough";
    }
    document.getElementById("demo1").innerHTML = voteable;
}

 <p>Input your age and click the button:</p>
        
        <input id="age1" placeholder="type your age" />
        <button onclick = "ageVerify()">Verify the age</button>
        
        <p id="demo1"></p>

Привет. Когда я играл с условными (тенарными) функциями, я обнаружил забавную сторону этого, а также его предел. Прямо сейчас, если пользователь не набирает номер или что-то еще, он получает сообщение «Пожалуйста, введите номер». И в зависимости от того, набирают ли они старше 18 или младше 18 лет, они получат либо «слишком молод»: «достаточно взрослый».

Все было хорошо, пока я не обнаружил, когда я снова попытался проверить возраст с пустым вводом после ввода числа, innerHTML («Слишком молодой») не исчезает и не заменяется на «Пожалуйста, введите число», когда я ничего не печатать. Это работает, если я не ставлю цифры заранее, но как только я ставлю цифры, сообщение не исчезает. Есть ли способ зациклить функцию? Я надеюсь, что я объяснил ясно.

Спасибо за чтение.

Answer 1

Пожалуйста, измените вашу функцию Javascript на эту.

function ageVerify() {
            var age1 = Number(document.getElementById("age1").value);

            var voteable;
            if (isNaN(age1) || document.getElementById("age1").value=="") {
                voteable = "Please type a number";
            } else {
                voteable = (age1 < 18) ? "Too young" : "Old enough";
            }
            document.getElementById("demo1").innerHTML = voteable;
            return false;
        }

Answer 2

Происходит то, что вы проверяете неправильные значения в своем первом операторе if. Так как вы используете Number(document.getElementById("age1").value), чтобы превратить age1 в число, пустой ввод никогда не будет NaN, а будет 0. И так как значение уже установлено, оно также не пройдет. Вот почему он не изменится на нужный вам текст.

Также, если вы устанавливаете текст элемента, лучше использовать .textContent вместо .innerHTML

Попробуйте использовать приведенный ниже фрагмент кода.

function ageVerify() {
  var age1 = Number(document.getElementById("age1").value);
  var voteable;
  if (isNaN(age1) || !document.getElementById("age1").value) {
    voteable = "Please type a number";
  } else {
    voteable = (age1 < 18) ? "Too young" : "Old enough";
  }
  document.getElementById("demo1").textContent = voteable;
}

<p>Input your age and click the button:</p>

<input id="age1" placeholder="type your age" />
<button onclick="ageVerify()">Verify the age</button>

<p id="demo1"></p>