Making a loop over an array and only add even numbers to it

Question

The idea of the program is to make a loop that will iterate over the option elements in the select box and only add even numbers to it (from 16 to 30 including 30). To be specific : It is a fontSizeBox and I want to add font sizes to it so the user can choose from them .

The problem is that I get numbers starting from 16 to 23 and not as expected . The code :

window.onload = function() {
  let fontSizeBox = document.createElement("select");
  fontSizeBox.name = "fontSize-box";
  document.body.prepend(fontSizeBox);

  let fontSizeBoxLabel = document.createElement("label");
  fontSizeBoxLabel.appendChild(document.createTextNode("Choose the font size :"));
  fontSizeBox.before(fontSizeBoxLabel);

  for (let i = 16; i <= 30; i += 2) {
    fontSizeBox.appendChild(document.createElement("option"));
  }
  
  Array.from(fontSizeBox);
  /* The above code will make the fontSizeBox an array so I can iterate over
  it using the loop */
  for (let i = 0; i <= 7; i++) {
    fontSizeBox[i].innerHTML = i + 16;
    /* The following code won't work without the number constructor 
    because I tried this code in the console and here is the output: 

    typeof fontSizeBox[0].innerHTML;
    >> 'string' */
    if ((Number(fontSizeBox[i].innerHTML) % 2) !== 0) {
      continue;
    }
  }

}

<title>Document</title>

Why do you need the second loop? Just add the innerHTML in the first loop: var element = document.createElement("option"); element.innerHTML = i; fontSizeBox.appendChild(element); And remove all the code below that. — adiga
– adiga, Commented Jan 10, 2023 at 6:41
Also, Array.from(fontSizeBox) does not convert the fontSizeBox to an array. It returns an array which you need to assign to another variable: var fontSizeBoxArray = Array.from(fontSizeBox) — adiga
– adiga, Commented Jan 10, 2023 at 6:44

Carsten Massmann · Accepted Answer · 2023-01-10 07:08:08Z

1

Maybe this will do it for you?

window.onload = function() {
  document.body.insertAdjacentHTML("afterbegin",`<label>Choose the font size: <select name="fontSize-box">${[...Array(8)].map((_,i)=>`<option>${2*i+16}</option>`).join("")}</select></label>`);
}

<title>Document</title>

I decided to use .insertAdjacentHTML(), and only once, as every modification of the DOM will be costly in terms of browser activity. While the .createElement() and .appendChild() calls are fast and efficient in themselves, doing everything in one go will probably be more efficient in the end than the multiple create and append actions.

edited Jan 10, 2023 at 7:08

answered Jan 10, 2023 at 6:58

Carsten Massmann

28.4k3 gold badges25 silver badges49 bronze badges

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

Collectives™ on Stack Overflow

Making a loop over an array and only add even numbers to it

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related