document.getElementsByClassName for multiple classes?

Question

I'm a little stuck, please help.

<script>  
    var language = '#LanguageCode#-#CountryCode#';
    if(language === 'en-gb'){
      document.getElementsByClassName('apple')[0].innerHTML = '<img src="english-apple.svg"/>';    
      document.getElementsByClassName('android')[0].innerHTML = '<img src="english-android.svg"/>'; 

    } else if(language === 'nb-no'){
         document.getElementsByClassName('apple')[0].innerHTML = '<img src="norwegian-apple.svg"/>';  
         document.getElementsByClassName('android')[0].innerHTML = '<img src="norwegian-android.svg"/>'; 
    }   
</script>

This works a treat, but when I try to add another class to document.getElementsByClassName, it doesn't work.

Something like this:

document.getElementsByClassName('apple bottomapple')[0].innerHTML = '<img src="english-apple.svg"/>';

In the other class I'm trying to add, there's an image with the same naming e.g. english-apple.svg. I need both classes to run at the same time if(language === 'nb-no') is true.

Any help will be much appreciated.

Thanks

Possible duplicate of [Javascript - how to get elements with multiple classes](http://stackoverflow.com/questions/7184562/javascript-how-to-get-elements-with-multiple-classes) — rkeet, Mar 03 '17 at 11:28
Second class definitely exists and I've copied it 100x to make sure — user2239972, Mar 03 '17 at 11:31

Ionut Necula · Answer 1 · 2017-03-03T11:52:42.383

Ok. So the problem here is this:

document.getElementsByClassName('apple bottomapple') will work for:

<div class="apple bottomapple"></div>

But it will not work for this:

<div class="apple"></div>
<div class="bottomapple"></div>

So you have one approach here that cames across my mind now. You can use document.querySelectorAll() method:

var divs = document.querySelectorAll('.apple, .bottomapple');
for(var i = 0; i < divs.length; i++) {
  divs[i].innerText = 'test ' + i;
}

<div class="apple"></div>
<div class="bottomapple"></div>

score 1 · Accepted Answer · answered Mar 03 '17 at 12:06

1

Someone put an answer here but now it's gone, wanted to thank them.

This worked for me:

[...document.querySelectorAll('.apple,.bottomapple')].map(x => x.innerHTML = '');

Thanks everyone!

answered Mar 03 '17 at 12:06

user2239972

45
1
8

document.getElementsByClassName for multiple classes?

2 Answers2