How to reset input value

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> 

Hi. When I was playing around with conditional (tenary) functions, I have discovered the fun side of it as well as its limit. Right now, if the user does not type a number or anything, they get a message "Please type a number." And depends on they type over 18 or under 18, they will get either "Too young":"Old enough".

Everything was fine until I discovered when I tried to verify the age again with an empty input after putting the number, the innerHTML ("Too young") does not go away or get replaced by "Please type a number" when I don't type anything. It works if I don't put numbers beforehand, but as soon as I put numbers, the message does not go away. Is there any way to loop the function? I hope I explained clearly.

Thank you for reading.

Answer 1

What is happening is that you are testing the wrong values in your first if statement. Since you are using Number(document.getElementById("age1").value) to turn age1 into a number an empty input will never be NaN , rather it will be 0. And since the value is already set that won't pass either. That's why it wont change back to your desired text.

Also if your setting the text of the element it is best practice to use .textContent rather than .innerHTML

Try using the below code snippet instead.

 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> 

Answer 2

Please change your Javascript function to this one.

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;
        }