Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Changing background color of tags

<!DOCTYPE html>

    <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'>
        var blanket = "blanket.jpg";
        var bluestem = "bluestem.jpg";
        var rugosa = "rugosa.jpg";
        var defaultpic = "flower.png";

        function ChangeColor(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;



<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 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>



            <li onmouseover="document.getElementById('plantImg').src = blanket"
                onmouseout="document.getElementById('plantImg').src = defaultpic"> Blanket Flower
            <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>

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


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

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?


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.