Question 215825 in Html Question posted in
Some basic documentation can be found here.

Html – How do I get the even/odd number check to print the results?

I got something to print but it is not the proper answer. Right now I am just getting "[object HTMLFormElement] is a Odd number" no matter what number I enter weather it is even or odd.

function isEvenorOdd(num, form) {
    if (num % 2 == 0) {
        document.getElementById('result').innerHTML = `${num} is a Even number`
        console.log(`${num} is a Even number`)
    }
    else {
        document.getElementById('result').innerHTML = `${num} is a Odd number`
        console.log(`${num} is a Odd number`)
    }
}
Check if numbers are even or odd:
<form>
<input type="text">
<input type="button" value="Check" 
onclick="isEvenorOdd (this.form);">
</form>
<div id="result"></div>
Tags:

3

Answers


  1. 0

    There are a few issues with your code

    • isEvenorOdd function – you have two marameters num and form. But when you call the function in the onclick attr, you are only passing the form element (this.form) not the input field.
    • You are not actually getting the value from the input field
    • Your input field has no ID which the JS cant determine or get the value.

    Here is a working example – fairly straight forward:

        function isEvenorOdd() {
        let num = document.getElementById('num').value;

        // Check if number is valid
        if (isNaN(num)) {
            document.getElementById('result').innerHTML = `Please enter a valid number`;
            return;
        }

        num = parseInt(num);

        if (num % 2 == 0) {
            document.getElementById('result').innerHTML = `${num} is an Even number`
            console.log(`${num} is an Even number`)
        }
        else {
            document.getElementById('result').innerHTML = `${num} is an Odd number`
            console.log(`${num} is an Odd number`)
        }
    }
        <div>Check if numbers are even or odd:</div>
    <form>
        <input type="text" id="num">
        <input type="button" value="Check" onclick="isEvenorOdd();">
    </form>
    <div id="result"></div>

    Big Int Example: for use case 11111111111111111 and 11111111111111112

        function isEvenorOdd() {
        let num = document.getElementById('num').value;

        // Check if number is valid
        if (isNaN(num)) {
            document.getElementById('result').innerHTML = `Please enter a valid number`;
            return;
        }

        num = BigInt(num);

        if (num % 2n == 0n) {
            document.getElementById('result').innerHTML = `${num} is an Even number`
            console.log(`${num} is an Even number`)
        }
        else {
            document.getElementById('result').innerHTML = `${num} is an Odd number`
            console.log(`${num} is an Odd number`)
        }
    }
        Check if numbers are even or odd:
    <form>
        <input type="text" id="num">
        <input type="button" value="Check" onclick="isEvenorOdd();">
    </form>
    <div id="result"></div>
    Login or Signup to reply.
  2. 0

    As said, you are passing the form object and not the numeric value of the field. you need to get the text input, get its value, parse it to int, and then call isEvenorOdd:

    function isEvenorOdd(num, form) {
    if (num % 2 == 0) {
        document.getElementById('result').innerHTML = `${num} is a Even number`
        console.log(`${num} is a Even number`)
    }
    else {
        document.getElementById('result').innerHTML = `${num} is a Odd number`
        console.log(`${num} is a Odd number`)
    }
}
    Check if numbers are even or odd:
<form>
<input type="text">
<input type="button" value="Check" 
onclick="isEvenorOdd(parseInt(this.form.querySelector('input[type=text]').value));">
</form>
<div id="result"></div>
    Login or Signup to reply.
  3. 0

    Instead of using an onclick function on your HTML it is much better to use eventListeners like this:

    const button = document.querySelector('input[type=button]');;//get the button element
const result = document.getElementById('result')
//addEventListener to the button
button.addEventListener("click", function(){
    let num = document.querySelector('input[type=text]').value;//get the input text only on each button press to ge tthe value every time
   //Number() to convert it to a number then compare, also validate if number is NaN
  if(!isNaN(num)){
    num = Number(num);
    if (num % 2 == 0) {
      result.textContent = `${num} is an Even number`;
    } else {
      result.textContent = `${num} is an Odd number`;
    }
  } else {
    result.textContent = `your input "${num}" is not a number, plz try again`;
  }
})
    <body>
  Check if numbers are even or odd:
  <form>
    <input type="text">
    <input type="button" value="Check">
  </form>
  <div id="result"></div>
</body>

    Also if you are going to change the text of an element only then it is much better in terms of performance to use textContent than innerHTML.

    Also you have to validate if the user actually typed numbers, since it’s an input text, they can type whatever they want, not necesarily a number so. If they type something like Foo then you have to validate with isNaN() when you convert it to a number with Number() if that returns NaN then that means that he didn’t type a number so therefore it can’t be converted with Number() and you can return something like ${num} is not a number

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search