Javascript Odd or Even

Hey,

I need help again…

I want a simple Form with a Button. My Function should check wether the user’s input is odd or even. I used this code therefore.

    <form id="form">
        <input id="userInput" type="number">
        <button id="btn">Click!</button>
    </form>

This is my Javascript:

let btn = document.getElementById('btn');
let userInput = document.getElementById('userInput');

function getSolution(userInput){
    userInput.preventDefault();
    
    if(userInput%2 == 0){
        console.log(1);
    } else{
        console.log(2);
    }
}

btn.addEventListener('click', getSolution);

This stuff is always logging Number 2 (so odd) to the console…

Thank you for your help!

if you log userInput or the typeof user input, you will see that the value or type is the Html element itself. Not the value of the input/field

1 Like

There is no default behavior on a <button/> element, only on an input type="submit" control. That line is superfluous.

Recall that <input> is a void element and in the DOM we access user input through the value attribute.

1 Like

Thanks for your Support! I set userInput to document.querySelector(’#userInput’).value. If I console.log(userInput) it says undefined. It also does when I write a number in the input field.

If I set userInput = 2 in app.js it’s saying “2” as well. But if I comment everything except the function out and console.log(getSolution(1/2) I get the right answer in the console.

I have no clue what I am doing wrong…

I would not include the attribute in the DOM node, just the node itself. Refer to the value attribute in your handler.

1 Like

Unfortunately my problem consists even though… how would you refer to the value attribute in the handler? Just to check if I did it wrong…

Thank you for your help!

1 Like

The call to the handler is coming from the event listener. JS has the properties of that event in memory, in the Event Object.

const handler = e => {

}

where e is the event object (regardless what we name this parameter). We’re looking for the target attribute of that object, which will point to the DOM node where the event was detected, triggering the handler. That node, having a value attribute means we can retrieve (poll) its value.

    const user = e.target.value;

We still need to consider whether that value is string or number, which I’m inclined to believe is String data, albeit numeric in nature.

If we are given that the data is numeric then we can use the unary + operator which coerces a ‘number’ type from a ‘string’. If in fact it is not a numeric value, then it casts to NaN.

    const user = +(e.target.value);
let btn = document.getElementById('btn');
let userInput = document.querySelector('#userInput');

const handler = e => {

    let input = +(e.target.value);

    if(e%2 == 0){
        console.log('even');
    } else{
        console.log('odd');
    }
}

btn.addEventListener('click', handler);

Even though I guess I understand your explanation whilst reading I am not getting more confident and clear what to code. In my code snippet I call the function in my event listener. Then I set my event object to the value of e.target which should refer to the value of the clicked (btn.addEventListener = …) element? So wouldn’t this be the button?

My code on top gives me only the Number 2 so odd… I appreciate your help but I can relate if you do not want to explain it another time… :woozy_face:

Best regards.

In this comparison:

    if(e%2 == 0){

what is e? Its not the targeted value

document.getElementById("myButton").onclick = function(){
    var myInput = document.getElementById("myInput").value;
    
    if(myInput%2 == 0){
        console.log("I am a even number.");
    } else{
        console.log("I am a odd number.");
    }
}

You are absolutely right. This is my working solution now. It’s not 100% what I wanted but it’s working. I guess I have to refresh the use of an event object in my head. Even though I am very thankful for your and @mtf’s fast and professional help. It makes learning much easier.

Recall that e is the event object. user is the value we can use in the comparison…

if (user % 2 === 0) {

}
1 Like