4

I am a complete newbie to javascript and I need help! I need to create a function changeColor (newColor) {} where changeColor is the name of the function and newColor is the ONLY argument to be passed to the function (can't change this, I can only use a single argument in my function). I have an unordered list that represent different colors. For example:

<li><a href="#" >black</a></li>
<li><a href="#" >blue</a></li>
<li><a href="#" >red</a></li> etc.

I need to add an onclick event to each of the links as shown in the example below:

<li><a href="#" onclick="changeColor(newColor)">black</a></li>
<li><a href="#" onclick="changeColor(newColor)">blue</a></li>
<li><a href="#" onclick="changeColor(newColor)">red</a></li>

I need the onclick event to do three things:

1) Change the external css stylesheet in the head section (has an id of 'styleSheet') to the stylesheet that goes with the color that the link represents (i.e. black has its own stylesheet called black.css, blue has its own stylesheet called blue.css, etc.) If the user clicks on the link with the text "black", then black.css should load, if the user clicks on the link for "blue", blue.css should load, etc.

2) Change the image that is shown on the page (with the id of 'selectedImg') in the same manner as the stylesheets (i.e. each color has its own image. black has an image called black.jpg, blue has an image called blue.jpg, etc). If the user clicks on the link for "black", black.jpg should be displayed. if the user clicks on the link "blue", blue.jpg should be displayed, etc.

3) Change the paragraph text (the text of the paragraph ) that displays to the right of the image (each color has its own specific text associated with it (i.e. black has a var black = "here is the text that goes to the right of the black picture"; blue has a var blue = "here is the text that goes to the right of the blue picture"; etc ). If the user clicks on the link for "black", the text assigned to the variable "black" that is in the function (var black = "some text for black";) should be displayed to the right of the image, etc.

This all needs to be done without leaving the default page (i.e. the links don't go anywhere, the three events happen on the same page depending on which link you click on).

I am an extreme newbie to javascript. So if you are so kind to offer me help with this, you can't give me any advanced techniques.

The only javascript "functions" I can use are: onclick, this, childNodes, firstChild, getElementById(), getElementsByTagName(), setAttribute() and some kind of simple loop or if statements.

Like I said, I have to use a function with only one argument and the onclick event has to perform all three changes as listed above. Can't create any more functions or arguments. That is the only one I can use. Here is the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1      /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Color Theory</title>
<link id='styleSheet' href="css/base_styles.css" rel="stylesheet" type="text/css" />
<script src="events.js" type="text/javascript"></script>
</head>

<body>
<h1>Color Theory 101</h1>
<ul id="navbar">
<li><a href="#">black</a></li>
<li><a href="#">blue</a></li>
<li><a href="#">brown</a></li>
<li><a href="#">green</a></li>
<li><a href="#">orange</a></li>
<li><a href="#">pink</a></li>
<li><a href="#">purple</a></li>
<li><a href="#">red</a></li>
<li><a href="#">white</a></li>
<li><a href="#">yellow</a></li>
</ul>
<h2>Pick a Color</h2>
<img src="images/color_theory.jpg" alt="color theory" name="selectedImg" `enter code here`id="selectedImg"  />
<p id="facts">Colors hold many different meanings in different cultures. Click a link above to learn more.</p>
</body>
</html>

Any help would be most appreciated. I know how to do all three things separately but I can't figure out how to do them all at the same time with the same function using only one argument.

* EDIT CURRENT CODE * HTML: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Color Theory</title>
<link id='styleSheet' href="css/base_styles.css" rel="stylesheet" type="text/css" />
<script src="events.js" type="text/javascript"></script>
</head>

<body>
<h1>Color Theory 101</h1>

<ul id="navbar">
  <li><a href="black" onclick="changeColor(this)">black</a></li>
  <li><a href="blue" onclick="changeColor(this)">blue</a></li>
  <li><a href="brown" onclick="changeColor(this)">brown</a></li>
  <li><a href="green" onclick="changeColor(this)">green</a></li>
  <li><a href="orange" onclick="changeColor(this)">orange</a></li>
  <li><a href="pink" onclick="changeColor(this)">pink</a></li>
  <li><a href="purple" onclick="changeColor(this)">purple</a></li>
  <li><a href="red" onclick="changeColor(this)">red</a></li>
  <li><a href="white" onclick="changeColor(this)">white</a></li>
  <li><a href="yellow" onclick="changeColor(this)">yellow</a></li>
</ul>
<h2>Pick a Color</h2>
<img src="images/color_theory.jpg" alt="color theory" name="selectedImg" id="selectedImg"  />
<p id="facts">Colors hold many different meanings in different cultures. Click a link above to learn more.</p>
</body>
</html>

JAVASCRIPT:

function changeColor(newColor) {

    var alertTest = newColor.getAttribute('href');
    var styleSheet = document.getElementById('styleSheet');
    var newStyle = styleSheet.setAttribute('href', newColor + '.css');
    var selectedImg = document.getElementById('selectedImg');
    var newImage = selectedImg.setAttribute('src', newColor + '.jpg');

    var black = "Black absorbs all light in the color spectrum. It is often used as a symbol of menace or evil, but it is also popular as an indicator of power. It is used to represent treacherous characters such as Dracula and is often associated with witchcraft. Black is associated with death and mourning in many cultures. It is also associated with unhappiness, sexuality, formality, and sophistication. In ancient Egypt, black represented life and rebirth. Consider how black is used in language: Black Death, blackout, black cat, black list, black market, black tie, black belt.";

    var white = "White represents purity or innocence. It is bright and can create a sense of space or add highlights. White is also described as cold, bland, and sterile. Rooms painted completely white can seem spacious, but empty and unfriendly. Hospitals and hospital workers use white to create a sense of sterility.";

    var red = "Red is a bright, warm color that evokes strong emotions. It is associated with love, warmth, and comfort. Red is also considered an intense, or even angry, color that creates feelings of excitement or intensity. Consider how red is used in language: redneck, red-hot, red-handed, paint the town red, seeing red.";

    var blue = "Blue is described as a favorite color by many people and is the color most preferred by men. It calls to mind feelings of calmness or serenity. It is often described as peaceful, tranquil, secure, and orderly. Blue can also create feelings of sadness or aloofness. It is often used to decorate offices because research has shown that people are more productive in blue rooms. Blue is one of the most popular colors, but it is one of the least appetizing. Some weight loss plans even recommend eating your food off of a blue plate. Blue rarely occurs naturally in food aside from blueberries and some plums. Also, humans are geared to avoid foods that are poisonous and blue coloring in food is often a sign of spoilage or poison. Blue can also lower the pulse rate and body temperature. Consider how blue is used in language: blue moon, blue Monday, blue blood, the blues, and blue ribbon.";

    var green = "Green is a cool color that symbolizes nature and the natural world. It also represents tranquility, good luck, health, and jealousy. Researchers have also found that green can improve reading ability. Some students may find that laying a transparent sheet of green paper over reading material increases reading speed and comprehension. Green has long been a symbol of fertility and was once the preferred color choice for wedding gowns in the 15th-century. Even today, green M & M's (an American chocolate candy) are said to send a sexual message. Green is often used in decorating for its calming effect. For example, guests waiting to appear on television programs often wait in a 'green room' to relax. Green is thought to relieve stress and help heal. Those who have a green work environment experience fewer stomachaches. Consider how green is used in language: green thumb, green with envy, greenhorn.";

    var yellow = "Yellow is a bright that is often described as cheery and warm. It is also the most fatiguing to the eye due to the high amount of light that is reflected. Using yellow as a background on paper or computer monitors can lead to eyestrain or vision loss in extreme cases. Yellow can also create feelings of frustration and anger. While it is considered a cheerful color, people are more likely to lose their tempers in yellow rooms and babies tend to cry more in yellow rooms. Yellow can also increase the metabolism. Since yellow is the most visible color, it is also the most attention-getting color. Yellow can be used in small amount to draw notice, such as on traffic sign or advertisements.";

    var purple = "Purple is the symbol of royalty and wealth. Purple also represents wisdom and spirituality. Purple does not often occur in nature, it can sometimes appear exotic or artificial.";

    var brown = "Brown is a natural color that evokes a sense of strength and reliability. It can also create feelings of sadness and isolation. Brown brings to mind feeling of warmth, comfort, and security. It is often described as natural, down-to-earth, and conventional, but brown can also be sophisticated.";

    var orange = "range is a combination of yellow and red and is considered an energetic color. Orange calls to mind feelings of excitement, enthusiasm, and warmth. Orange is often used to draw attention, such as in traffic signs and advertising.";

    var pink = "Pink is essentially a light red and is usually associated with love and romance. It is thought to have a calming effect. One shade known as 'drunk-tank pink' is sometimes used in prisons to calm inmates. Sports teams sometimes paint the opposing teams locker room pink to keep the players passive and less energetic. While pink's calming effect has been demonstrated, researchers of color psychology have found that this effect only occurs during the initial exposure to the color. When used in prisons, inmates often become even more agitated once they become accustomed to the color.";

    if (newColor === 'black') {
        factsText = black;
    } else if (newColor === 'blue') {
        factsText = blue;
    } else if (newColor === 'brown') {
        factsText = brown;
    } else if (newColor == 'green') {
        factsText = green;
    } else if (newColor === 'orange') {
        factsText = orange;
    } else if (newColor === 'pink') {
        factsText = pink;
    } else if (newColor === 'purple') {
        factsText = purple;
    } else if (newColor === 'red') {
        factsText = red;
    } else if (newColor === 'white') {
        factsText = white;
    } else {
        factsText = yellow;
    }
}
Improve this question
6
  • 1
    There is a preview when you composing the question. Please take some time and format it Commented Sep 21, 2012 at 2:13
  • To change the stylesheet, I did this, which works: function changeColor(newColor) { var styleSheet = document.getElementById('styleSheet'); styleSheet.setAttribute('href', newColor); and did basically the same thing for the images as well and for the text I used facts.firstChild.nodeValue = the variable that represents the color. I just can't figure out how to do all three things at once with just a single onclick event. } Commented Sep 21, 2012 at 2:17
  • Since you know how "to do all three things separately," I'd start there. Implement each requirement separately and then see how you can integrate them together to fit your requirements. If you get stuck, come back here and post the code and we'll gladly help you figure it out! However, you'll find it difficult to get "start to finish" answers here when you're effort is not readily apparent (there should be at least a demonstration of code and some specific questions related to that code, not general requirements/specifications). Good luck! Commented Sep 21, 2012 at 2:23
  • It's up to you of course, but it might be simpler to have one stylesheet, with rules like body.blue div {...} or body.green p {...}. Then you could just change the class of the body element on click and not bother with loading external sheets. It's a larger download at first, but then no more round-trips, and no delays. Commented Sep 21, 2012 at 2:34
  • Ok, so if I setup my function this way: function changeColor(newColor) { var styleSheet = document.getElementById('styleSheet'); styleSheet.setAttribute('href', newColor); } This will change the style the way I need it to if I add this to the html: <li><a href="#" onclick="changeColor('css/black.css')>black</a></li> <li><a href="#" onclick="changeColor('css/red.css')>black</a></li> etc. Now how do I add the other two events? (more of my work to come)... Commented Sep 21, 2012 at 4:20

1 Answer 1

Reset to default
1

I would do something like this

<li><a href="#" onclick="changeColor(this.childNodes[0].nodeValue)">blue</a></li>
<li><a href="#" onclick="changeColor(this.childNodes[0].nodeValue)">black</a></li>
<li><a href="#" onclick="changeColor(this.childNodes[0].nodeValue)">yellow</a></li>
<li><a href="#" onclick="changeColor(this.childNodes[0].nodeValue)">green</a></li>

etc...

and the javascript

var black = "here is the text that goes to the right of the black picture"; 
var blue = "here is the text that goes to the right of the blue"; 
//etc
function changeColor(color)
{

    document.getElementById('styleSheet').setAttribute('href', color + '.css');
    document.getElementById('selectedImg').setAttribute('src', color + '.jpg');
    document.getElementById('facts').innerHTML = window[color];

}

EDIT

Slight modification to the javascript based on comments

function changeColor(color)
    {
        var black = "here is the text that goes to the right of the black picture"; 
        var blue = "here is the text that goes to the right of the blue"; 
        //etc

        var textToShowInParagraph;
        document.getElementById('styleSheet').setAttribute('href', color + '.css');
        document.getElementById('selectedImg').setAttribute('src', color + '.jpg');

        if (color === 'black')
        {
             textToShowInParagraph = black;
        }
        else if (color === 'blue')
        {
              textToShowInParagraph = blue;
        } else if //con....

        document.getElementById('facts').childNodes[0].nodeValue = textToShowInParagraph;

    }

or with a switch statement

 function changeColor(color)
        {
            var black = "here is the text that goes to the right of the black picture"; 
            var blue = "here is the text that goes to the right of the blue"; 
            //etc

            var textToShowInParagraph;
            document.getElementById('styleSheet').setAttribute('href', color + '.css');
            document.getElementById('selectedImg').setAttribute('src', color + '.jpg');

            switch (color) {
                case "black":
                    textToShowInParagraph = black;
                    break;
                case "blue":
                    textToShowInParagraph = blue;
                    break;
                //con..
                default:
                    break;
             }

            document.getElementById('facts').childNodes[0].nodeValue = textToShowInParagraph;

        }

or you could use some local object variable scoping to do a similar thing to the first one with the variables being properties of the containing function and not the window (but this might be a step too far for you, based on your very strange restrictions - not sure??)

eg

function changeColor(color)
{
    this.black = "here is the text that goes to the right of the black picture"; 
    this.blue = "here is the text that goes to the right of the blue"; 
    //etc       

    document.getElementById('styleSheet').setAttribute('href', color + '.css');
    document.getElementById('selectedImg').setAttribute('src', color + '.jpg');
    document.getElementById('facts').childNodes[0].nodeValue = this[color];
 }

EDIT BASED ON CURRENT CODE EDIT FROM QUESTION

firstly, I wouldn't store the color values in the href of the a tags. Browsers expect to find a valid url, or an anchor there (i.e. http://somewhere.com or #footer). Putting # is OKish, this will cause an empty anchor navigation (i.e. the click won't go anywhere). So first point change the a tags to the following.

<a href="#" onclick="changeColor(this)">yellow</a>

next is in the javascript function, I would change to a bit more like this:

function changeColor(callingATag) {

    //get the newColor from the calling a tags child text node
    var newColor = callingATag.childNodes[0].nodeValue;

    //set the stylesheet href
    document.getElementById('styleSheet').setAttribute('href', newColor + '.css');
    // No need to set variables, can do it in one line, and the return value from 
    // setAttribute is undefined anyway

    // Set the img src attribute
    document.getElementById('selectedImg').setAttribute('src', newColor + '.jpg');
    //Same as above

    //Color text description variables fine
    var black = //etc.. etc.. con...

    //Color test to set text - fine but NOTE you had not declared the 
    // factsText variable, and in you code you don't do 
    // anything with it afterwards
    var factsText;
    if (newColor === 'black') {
        factsText = black;
    //etc.. etc..

    //then set the facts element text
    document.getElementById('facts').childNodes[0].nodeValue = factsText;

}

a couple of things to be aware. If any of your calls to setAttribute fail, then chances are the rest of the function will fail. Also if an element has no text in it, you will not have a .childNode[0].nodeValue, you will have to use appendChild to create the child node.

Another note, I would like to introduce you to jsFiddle, a web developers little sandbox, experiment tool, http://jsfiddle.net

To elaborate further, I have done a fiddle for you, testing in chrome and firefox and works fine. Not exactly the code you require, but (i.e. didn't have any stylesheets or images to change) but the principles are the same. Link below:

http://jsfiddle.net/4chVw/5/

Improve this answer
Sign up to request clarification or add additional context in comments.

25 Comments

Thanks for the help OJay. However, I can't use innerHTML as we have not studied that yet. All I can use is the function plus a loop to assign the values of the 'facts' element
yeah though you might say that, you could use document.getElementById('facts').childNodes[0].nodeValue = window[color], I'll edit my answer
I can't use the window[color] either. I can use the getElementById('facts') but I don't know how to structure the loop in order to assign the var values to the text. The variables have to be inside the function. so there is a var black = "text for black"; var blue = "text for blue"; etc inside the function. I need to use either a loop or if-else statements to assign the correct color text to the paragraph with the 'facts' element id. I know how to do the first two parts of the problem separately but I can't figure out how to put them all together into one onclick event.
surely you have just answered the last part of your question?
Ojay, what do you mean? I can figure out how to change the stylesheet reference and I can figure out how to change the image reference but only separately. If I try to do them together, only the second onclick action works. As for the text replacement, I don't have a clue how to do that.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.