0

I'm new to javascript and I got no clue what's not working, i'm just trying to get the background of some h2 with the class "titre" to turn blue. For some reason, if it's a getElementById it works fine but if I use getElementsByClassName it doesn't work and I don't get suggestion after style.

I know I should just use CSS without js to do it but it's a school thing and I need to do it like that. Thank you.

My js code:

function titre2(){
    var titreback = document.getElementsByClassName("titre");
    titreback.style.backgroundColor = "blue";
}

my HTML (where my class is):

<section>
        <article>
          <h2 class="titre" onblur="titre2();">Qu'est-ce que <em>Facebook</em> ?</h2>
Gerenuk
  • 11
  • 1

2 Answers2

1

getElementsByClassName returns a HTMLCollection you need to loop through them to set the style.

function titre2(){
    var titreback = document.getElementsByClassName("titre");
    for (let item of titreback) {
        item.style.backgroundColor = 'blue';
    }
}
Josh Bonnick
  • 2,281
  • 1
  • 10
  • 21
  • Thanks for your help but it's still not working, i'm using vs code if it helps. I did a code just before with getElementById and the "style" turns dark blue and gives me lots of suggestion. If i use class, even with your code, it doesn't work. – Gerenuk Oct 20 '20 at 17:09
  • Can you put your HTML inside the question? – Josh Bonnick Oct 20 '20 at 17:13
  • I just added the part where the class is, the whole one is pretty big. – Gerenuk Oct 20 '20 at 17:19
  • Do you want the color to change when you click it? – Josh Bonnick Oct 20 '20 at 17:20
  • the event is not really important, it could be onload or onmouseover, anything just want to understand what's wrong. – Gerenuk Oct 20 '20 at 17:21
  • `getElementsByClassName` does not return an array, it returns a [HTMLCollection](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection). – Teemu Oct 20 '20 at 17:22
  • @Teemu __array-like object similar to arguments__ - thought it best to keep things simple – Josh Bonnick Oct 20 '20 at 17:23
  • @Gerenuk I'm guessing at whats wrong without seeing the error message. The below answers explains the use of the Dev Console which would either tell you the error or confirm the function isn't being called. – Josh Bonnick Oct 20 '20 at 17:24
  • 1
    @JoshBonnick It's too simple, the next question OP sends after reading your answer is: "Why map mehod fails on my array" ... + that HTMLCollection doesn't have even `forEach` method, as you can see on the documentation page I've linked above. – Teemu Oct 20 '20 at 17:24
  • @Gerenuk every day is a school day! Thanks for rectifying my error, I've edited the answer. – Josh Bonnick Oct 20 '20 at 17:29
1

I suggest you take a deeper look at Chrome dev tools. (assuming that's what you're using) Find out how to set a breakpoint to see what exactly you're trying to manipulate.

That or console log your results.

the function .getElementById returns 1 element, while the function getElementsByClassName returns multiple elements!

So yes the above answer holds the key ;D GL!

Kevin
  • 31
  • 4