Javascript - How print even numbers from a odd number input? Also, how to display console.log on HTM-CodePudding

After research on strackoverflow I have written/coppied this function with help from others questions.

function evenOrOdd() {
  var value = [];
  value = document.getElementById('evenField').value;
  value = parseInt(value);
  if(evenField != ""){
    if(value%2==1){
        console.log(`${value} is an odd number next 10 digit will be`);
    for (var i = 1; i <= 10; i = i   1){
        value = value   2;
        document.getElementById('console-log').innerHTML = console.log(`Number ${i} is ${value}`);
      }
    }else{
        console.log(`${value} is an even number next 10 digit will be`);
        for (var i = 1; i <= 10; i = i   1){
        value = value   2;
        document.getElementById('console-log').innerHTML = console.log(`Number ${i} is ${value}`);
      }
    }
  }else{
    document.getElementById('console-log').innerHTML = "";
    
  }

}

evenOrOdd(10)

An exemple of output for it when the user types 11 ( an odd number ) is:

11 is an odd number  next 10 digit will be
array-interger.js:10 Number 1 is 13
array-interger.js:10 Number 2 is 15
array-interger.js:10 Number 3 is 17
array-interger.js:10 Number 4 is 19
array-interger.js:10 Number 5 is 21
array-interger.js:10 Number 6 is 23
array-interger.js:10 Number 7 is 25
array-interger.js:10 Number 8 is 27
array-interger.js:10 Number 9 is 29
array-interger.js:10 Number 10 is 31

And for a even number is:

12 is an even number next 10 digit will be
array-interger.js:16 Number 1 is 14
array-interger.js:16 Number 2 is 16
array-interger.js:16 Number 3 is 18
array-interger.js:16 Number 4 is 20
array-interger.js:16 Number 5 is 22
array-interger.js:16 Number 6 is 24
array-interger.js:16 Number 7 is 26
array-interger.js:16 Number 8 is 28
array-interger.js:16 Number 9 is 30
array-interger.js:16 Number 10 is 32

My question is how can I change it to print only even number after the user types an odd number?. Optional, how can I display the console.log on inside a HTML tag?

HTML code:

<div >
        <div >
          <div >
            <h1>Evens or Odds Numbers</h1>
            <form onsubmit="event.preventDefault();" name="form" method="POST">
                <div >
                 <label for="evenField" >Enter a number</label>
                 <input type="number"  id="evenField" name="evenField" min="1" max="99">
                 <small id="console-log" ></small>
                </div>
                
                <button 
                onclick="evenOrOdd()">
                    Submit</button>
              </form>
          </div>
        </div>
    </div>

I've tried to change the line

value = value 2; to

value = value 1; But it is printing both odd and even numbers

CodePudding user response：

This will print the next 10 odd number if value is even , and the next even numbers if the value is odd.

const evenOrOdd = () => {
  const value = parseInt(document.getElementById('evenField').value);
  if (value) {
    document.getElementById('console-log').innerHTML = "<br />"   `${value} is an ${ value % 2 == 1?'odd':'even'} number next 10 digit will be`

    const arr = [...Array(10).keys()];

    const result = arr.reduce((acc, item, index) => {
      const nextNum = index > 0 ? parseInt(acc[index])   2 : parseInt(acc)   2;

      document.getElementById('console-log').innerHTML  = "<br />"   `Number ${index 1} is ${acc[index]}`
      return [...acc, nextNum];
    }, [value   1])
  } else {
    document.getElementById('console-log').innerHTML = ''
  }



}

<div >
  <div >
    <div >
      <h1>Evens or Odds Numbers</h1>
      <form onsubmit="event.preventDefault();evenOrOdd()" name="form" method="POST">
        <div >
          <label for="evenField" >Enter a number</label>
          <input type="number"  id="evenField" name="evenField" min="1" max="99">
          <small id="console-log" ></small>
        </div>

        <button  onclick="evenOrOdd()">
                    Submit</button>
      </form>
    </div>
  </div>
</div>

CodePudding user response：

Try this :

function evenOrOdd(val) {
  let value = parseInt(val);
  if(value%2==1){
    console.log(`${value} is an odd number next 10 digit will be`);
    printNumbers(value);
  }else{
    console.log(`${value} is an even number next 10 digit will be`);
        printNumbers(value);
  }
}

function printNumbers(value) {
  for (var i = 1; i <= 10; i  ){
    let n = value   i;
    console.log(`Number ${i} is ${n}`);
    value = value   1
  }
}

evenOrOdd(11);