HTML + Javascript: can't get all instances from two elements at once?

Question

I want to add a CSS styling class to all instances of a selective set of elements: for example, all p elements as well as all h4 elements.

I define two JS variables which get all elements of the aforementioned tags, and insert them into an array, so that I can make a function which, in theory, should apply the selected class to all instances of the selected elements/tags.

However, when I run the code, it seems that the function assigns the class only to the first item of the array.


  
    
    JS Bin
    
  
    
      Text goes in here
      Text goes in here

If I invert the order of the element tags inside the array, then the h4 element will get the .italic class but the p element will not.

Perhaps it is not possible to use the "document" directive twice? Is there an alternative method to automatically add the same class to a set of multiple (but not all) html tags?

user_14251221 · Answer

You are looping through each property of the HTMLCollection, including properties like length, causing givenInst to be a number. Since it has no classList property, calling add on undefined creates an error and terminates the loop.

To solve this, you can use isNaN to check whether the property is a number or not:

.italic {
  font-style: italics;
}




  
  JS Bin
  



  Text goes in here
  Text goes in here

However, a better way is to use a for...of loop instead:

.italic {
  font-style: italics;
}




  
  JS Bin
  



  Text goes in here
  Text goes in here

user_4861760 · Answer

You might want to prefer the for...of loop for this and make use of the spread operator. It will produce a much nicer code output:

function styleTxt() {
    const h4Elems = document.getElementsByTagName("H4");
    const pElems = document.getElementsByTagName("P");
    const elemArray = [...pElems, ...h4Elems];
    for (const eachElem of elemArray) {
        eachElem.classList.add("italic");
    }
}

Of course, you can always pick both types of elements in one go with the querySelectorAll method:

const all = document.querySelectorAll("h4, p");

// Using the for...of loop:
for ( const el of all ){
  el.classList.add("italic");
}

// Using the `forEach` method:
all.forEach( el => el.classList.add("italic") )

user_5157454 · Answer

Use Document.querySelectorAll() to get both types of elements. Iterate the NodeList with NodeList.forEach(), and add the class to each element.

function styleTxt() {
  document.querySelectorAll('h4, p')
    .forEach(el => el.classList.add('italic'));
}

styleTxt();

.italic {
  font-style: italic;
}

Text goes in here
Text goes in here

user_555148 · Answer

Give this a try instead




  
  JS Bin
  



  Text goes in here
  Text goes in here

HTML + Javascript: can't get all instances from two elements at once?

4 Answers