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!

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

JavaScript

Posted by kaganulucay
.a{fill-rule:evenodd;}techdegree
kaganulucay
Full Stack JavaScript Techdegree Student 16,491 Points

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

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

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.

kaganulucay
.a{fill-rule:evenodd;}techdegree
kaganulucay
Full Stack JavaScript Techdegree Student 16,491 Points

Thanks I solved it.

kaganulucay
seal-mask
.a{fill-rule:evenodd;}techdegree
kaganulucay
Full Stack JavaScript Techdegree Student 16,491 Points
kaganulucay
.a{fill-rule:evenodd;}techdegree
kaganulucay
Full Stack JavaScript Techdegree Student 16,491 Points

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,

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

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.