Input data -> javascript and ternary operator

Question

I'm currently learning JavaScript and I had a few questions as to what was wrong with my code. I'm trying to make a simple age check with the ternary operator and form data. I'm trying to make it so that when the input from the form is under 18, you get the message, and when it is over the button appears. Thanks!

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>

brk · Accepted Answer · 2020-02-25 06:31:41Z

1

You need to attach an event to the input. In this example keyup event is added to the input. So on keyup check if the value is greater than 18. Note the use of parseInt and 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>

answered Feb 25, 2020 at 6:31

brk

50.3k10 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Khoa Over a year ago

Thanks, so I’m guessing that type=“number” on the input type does not define the data type in js but rather is just the way the Input works in html?

brk Over a year ago

it will be of string datatype

Khoa Over a year ago

Alright, thank you, I’ll try to implement this when I’m free.

TZiebura · Accepted Answer · 2020-02-25 06:26:02Z

0

Add your verification to an event listener for the input

userAge.addEventListener("change", verification);

In this way every time user changes the input your app verifies if he entered number greater than 18. You might also want to check for NaN values. If you want to check the verification on the fly as he is typing use "input" event instead

answered Feb 25, 2020 at 6:26

TZiebura

5144 silver badges15 bronze badges

Comments

fengxh · Accepted Answer · 2020-02-25 06:34:42Z

0

You need to attach a function to input's input or change event. Like below:

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

Try it.

answered Feb 25, 2020 at 6:34

fengxh

3842 silver badges8 bronze badges

Collectives™ on Stack Overflow

Input data -> javascript and ternary operator

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related