Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Changing background color of tags

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Tinley Xeriscapes</title>
    <link rel="stylesheet" media="screen and (max-device-width: 999px)" href="tinleyhand.css" />
    <link rel="stylesheet" media="screen and (min-device-width: 1000px)" href="tinley.css" />

    <link href='http://fonts.googleapis.com/css?family=Lily+Script+One' rel='stylesheet' type='text/css'>
    <script>
        var blanket = "blanket.jpg";
        var bluestem = "bluestem.jpg";
        var rugosa = "rugosa.jpg";
        var defaultpic = "flower.png";

        function ChangeColor(color){
            body.style.backgroundColor='color';
        }

        function color(color){
            document.getElementById('header').style.backgroundColor = color;
            document.getElementById('article').style.backgroundColor = color;
            document.getElementById('footer').style.backgroundColor = color;
            document.getElementById('aside').style.backgroundColor = color;
        }


    </script>


</head>

<body>
<div id="container">
 <div style="height:30px; width:100%;">
    <div style="float:left ;position:relative;">
    <a href="#" onmouseover="body.style.backgroundColor='red';"> Red </a>
    <a href="#" onmouseover="body.style.backgroundColor='blue';"> Blue </a>
    <a href="#" onmouseover="body.style.backgroundColor='green';"> Green </a>
    <a href="#" onmouseover="body.style.backgroundColor='yellow';"> Yellow </a>
    </div>

<!--PROBLEM PART-->
    <div style="float:right;position:relative;">
    <a href="#" onmouseover="color('red')"> Red </a>
    <a href="#" onmouseover="color('blue')"> Blue </a>
    <a href="#" onmouseover="color('green')"> Green </a>
    <a href="#" onmouseover="color('yellow')"> Yellow </a>
    </div>
<!--PROBLEM PART-->

 </div>   
    <header>

    </header>


    <aside>
        <ul>
            <li onmouseover="document.getElementById('plantImg').src = blanket"
                onmouseout="document.getElementById('plantImg').src = defaultpic"> Blanket Flower
            </li>
            <li onmouseover="document.getElementById('plantImg').src = rugosa"
            onmouseout="document.getElementById('plantImg').src = defaultpic">Hedge Rose</li>
            <li onmouseover="document.getElementById('plantImg').src = bluestem"
            onmouseout="document.getElementById('plantImg').src = defaultpic">Little Bluestem</li>
        </ul>
    </aside>

    <article>
        <figure>
            <img src="images/flower.png" width="640" height="400" alt="" title="" id="plantImg" />
            <figcaption>

            </figcaption>
        </figure>
    </article>

    <footer>
        <p>Tinley Xeriscapes &bull; Tinley Park, IL 60477</p>
    </footer>
</div>
<script src="plants.js"></script>
</body>
</html>

I don't know what is wrong with my code. Could someone help me for this. When i mouse over the link, I want to change tags background color.

2 Answers

Hi Kagan,

I didn't test this code so I don't know if you have additional problems but you're using getElementById and passing in a tag name. Those 4 elements don't have id's.

You could either give them id's or you could use getElementsByTagName

Ex: document.getElementsByTagName('header')[0].style.backgroundColor = color;

This method returns an html collection so you'll need to access the element at the proper index.

Thanks I solved it.

Thank you Jason... I realized that "getElementsByTagName" part after i posted it. I solved the problem actually.

I just wanna ask you question about your example.

Ex: document.getElementsByTagName('header')[0].style.backgroundColor = color;

'[0]' What is that part for? How does it affects code?

Sincerely,

When you use getElementbyId there can only be 1 element returned since id's are unique on the page. Therefore you get a reference to that element and you can use whatever properties or methods you need on it.

getElementsByTagName and getElementsByClassName are different in that potentially many elements can be matched and so an html Collection is returned instead.

This is an array like object where you can get at each individual element by using the normal array bracket syntax where you specify the index of the element you want.

In your case, there's only 1 header element on the page so the code will return an html collection of only 1 element. To access the first element in an array you use index 0.

Let me know if you need further clarification.