I'm trying to improve my JavaScript skills. Using a for loop I want to select every second element (for example I want to make them bold or italic). I know I can do this using CSS3 and the nth-child selector, but as I said, I'm trying to improve my JS skills and I want to do this using a for loop and no foreach loop or another JS loop type. I'm new in JS.

edit:I want to add all element but i just want to pick up every second element to make them bold or italic

var myList = document.getElementById('myList');
var addList = ["Python", "C", "C++", "Ruby", "PHP", "Javascript", "Go", "ASP", "R"];

for (var i = 0; i < addList.length; i++) {
  var newLi = document.createElement("li");

  newLi.innerHTML = addList[i];
  myList.appendChild(newLi);
}

<ul id="myList"></ul>

I'm trying to improve my JavaScript skills. Using a for loop I want to select every second element (for example I want to make them bold or italic). I know I can do this using CSS3 and the nth-child selector, but as I said, I'm trying to improve my JS skills and I want to do this using a for loop and no foreach loop or another JS loop type. I'm new in JS.

edit:I want to add all element but i just want to pick up every second element to make them bold or italic

var myList = document.getElementById('myList');
var addList = ["Python", "C", "C++", "Ruby", "PHP", "Javascript", "Go", "ASP", "R"];

for (var i = 0; i < addList.length; i++) {
  var newLi = document.createElement("li");

  newLi.innerHTML = addList[i];
  myList.appendChild(newLi);
}

<ul id="myList"></ul>

• javascript
• arrays

6 Answers 6

Use the modulo(%)operator to get every 2nd element in loop and add fontStyle to it:

var myList = document.getElementById('myList');
var addList = ["Python", "C", "C++", "Ruby", "PHP", "Javascript", "Go", "ASP", "R"];

for (var i = 0; i < addList.length; i++) {
  var newLi = document.createElement("li");
  newLi.innerHTML = addList[i];
  if(i % 2 == 0){
  newLi.style.fontStyle = "italic";
  newLi.innerHTML = "<strong>"+addList[i]+"</strong>";
  }

  myList.appendChild(newLi);
}

<ul id="myList"></ul>

In your for loop, instead of increasing i by 1, increase i by two on every iteration with i+=2.

Updated code:

var myList = document.getElementById('myList');
var addList = ["Python", "C", "C++", "Ruby", "PHP", "Javascript", "Go", "ASP", "R"];

for (var i = 0; i < addList.length; i+=2) {
  var newLi = document.createElement("li");

  newLi.innerHTML = addList[i];
  myList.appendChild(newLi);
}

<ul id="myList"></ul>

In your for loop, instead of i++, use i += 2.

You could add something like this to the loop body:

if (i % 2 == 1) {
    // whatever you need to do to make it bold or italic
}

This will be called for every odd value of i.

Simply use i+=2 in place of i++ in your loop

To add all elements and pick up every 2nd element, use the modulo operator % in if statement: i % 2 == 0 and change the fontStyle.

Updated code:

var myList = document.getElementById('myList');
var addList = ["Python", "C", "C++", "Ruby", "PHP", "Javascript", "Go", "ASP", "R"];

for (var i = 0; i < addList.length; i+=2) {
  var newLi = document.createElement("li");
  
  if (i % 2 == 0) {
    // make bold
    newLi.style.fontStyle = "bold"
    // make italic
    newLi.style.fontStyle = "italic"
  }

  newLi.innerHTML = addList[i];
  myList.appendChild(newLi);
}

<ul id="myList"></ul>