I am a complete newbie to javascript and I need help! I need to

Question

0

Asked: June 11, 20262026-06-11T19:30:43+00:00 2026-06-11T19:30:43+00:00

I am a complete newbie to javascript and I need help! I need to

0

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

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-06-11T19:30:44+00:00

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/

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I am a complete newbie to javascript and I need help! I need to

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply