input box not working when Oninput() calls-CodePudding

I wanted to add Oninput listener on my input tag and when value changes in the input then i want to execute my logic. But i am not able to do that my oninput method not working. Also i want to handle the submit event on button click.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Phone Survey Form</h1>
    <form onsubmit="handleSubmit(event)">
        <label for="age">Your age</label>
        <input type="number" id="q_age" min="0" oninput="ageChange(event)" value="0">
        <br>
        <label for="q_owns_phone">Do you own a phone</label>
        <input type="checkbox" id="q_owns_phone">
        <br>

        <button type="submit">Submit</button>
    </form>
    <div id="errors-holder"></div>
    <div id="result-holder"></div>
</body>
</html>

JavaScript starts here:

let age = parseInt(e.getElementById(q_age).value);
let checkbox = document.getElementById('q_owns_phone').cheked;
function ageChange(e) {
   e.addEventlistener('change',()=>{
    if (age > 0 && age < 5) {
        document.getElementById('errors-holder').innerHTML = "You need to be atleast 5 years old to participate";

    } else if (age == 0) {
        document.getElementById('errors-holder').innerHTML = "Please choose age";
    }
   })
}

function handleSubmit(e) {
    e.preventDefault();
    if (checkbox == true && age < 13) {
        document.getElementById('result-holder').innerHTML = "You are too young to have a phone";

    } else if (checkbox == true && age > 13) {
        document.getElementById('result-holder').innerHTML = "Use your phone in moderation";
    } else if (checkbox == false && age < 13) {
        document.getElementById('result-holder').innerHTML = "You will get a phone soon";
    }
}

CodePudding user response：

It's kind of hectic in your first function.

Firstly I'm not sure what's let age = parseInt(e.getElementById(q_age).value); suppose to do as it is.

Instead, I've put let age = document.getElementById("q_age").value; inside your function, because otherwise it would have the value of "".

Then, you tried adding an eventListner to an event (that you don't actually use anywhere) , and then call that function in another event inside your HTML element.

Below is the code that works as it's supposed to.

Note that I added another else if for numbers higher then 5.

let checkbox = document.getElementById('q_owns_phone').cheked;  

function ageChange() {
let age = document.getElementById("q_age").value;
    if (age > 0 && age < 5) 
    {
       document.getElementById('errors-holder').innerHTML = "You need to be atleast 5 years old to participate";
    } else if (age == 0) 
    {
        document.getElementById('errors-holder').innerHTML = "Please choose age";
    }else if(age > 5)
         document.getElementById('errors-holder').innerHTML = "Higher then 5";
}

function handleSubmit(e) {
    e.preventDefault();
    if (checkbox == true && age < 13) {
        document.getElementById('result-holder').innerHTML = "You are too young to have a phone";

    } else if (checkbox == true && age > 13) {
        document.getElementById('result-holder').innerHTML = "Use your phone in moderation";
    } else if (checkbox == false && age < 13) {
        document.getElementById('result-holder').innerHTML = "You will get a phone soon";
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Phone Survey Form</h1>
    <form onsubmit="handleSubmit(event)">
        <label for="age">Your age</label>
        <input type="number" id="q_age" min="0" oninput="ageChange()" value="0">
        <br>
        <label for="q_owns_phone">Do you own a phone</label>
        <input type="checkbox" id="q_owns_phone">
        <br>

        <button type="submit">Submit</button>
    </form>
    <div id="errors-holder"></div>
    <div id="result-holder"></div>
</body>
</html>