Change elements style using javascript

Question

I'm working on some project of my own where I have the following problem: - I want to change the span's content font color to be red.

Here is the HTML

<html>
    <head>
        <title>Testing</title>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script>
           var arr = document.getElementsByClassName("change");
           console.log(arr);
           console.log(arr.length);
           var i;

            for (i = 0; i <= arr.length; i++) {
            console.log(arr[i]);
            arr[i].style.color = red;
            }
        </script>

    </head>
    <body>
        <div> 
           <p id="test">Something <span class="change">here</span></p>
           <p id="test">Something <span class="change">there</span></p>
           <p id="test">Something <span class="change">everywhere</span></p>

        </div>
     </body>

</html>

Based on what I think, this should work. However, it's strange. on the console.log(arr) I get input of HTML Collection [ ] in the browser's console, which seems to hold all the elements just fine.

However, using arr.length gives me 0? I'm baffled as to where I'm making a mistake, and I'm sure it's something simple that I cannot put my finger on.

Help is appreciated. Thanks in advance.

`document.getElementsByClassName` doesn't actually return an array. It returns a `HTMLCollection`. But in this case you are ok, because `HTMLCollection` has a length property. I think your script is running before the DOM is done parsing so when you ask for the elements, they aren't there yet. Either move your script block to the bottom or wait for the `DOMContentLoaded` event. https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded Oh, and what Kresimir said. — Will, Jun 13 '17 at 21:42
You can not do <= going to be another error since the array is zero based. — epascarello, Jun 13 '17 at 21:44
@Will You are correct. I moved the script on the bottom of the body and it seems to be working. I had no idea it had to wait for that, so much for my JS basics. Also the quotes around the "" seems to do the trick. — Nikola L., Jun 13 '17 at 21:48

score 0 · Answer 1 · answered Jun 13 '17 at 21:51

Try this one

<html>
    <head>
        <title>Testing</title>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <div> 
           <p id="test">Something <span class="change">here</span></p>
           <p id="test">Something <span class="change">there</span></p>
           <p id="test">Something <span class="change">everywhere</span></p>
        </div>
        <script>
           var arr = document.getElementsByClassName("change");
           var i;
            for (i = 0; i < arr.length; i++) {
             arr[i].setAttribute("style", "color: red");
            }
        </script>
     </body>
</html>

Change elements style using javascript

1 Answers1