Home/ Questions/Q 8036705
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T02:42:24+00:00

Working on some javascript exercises for class but running into two problems. I can’t

  • 0

Working on some javascript exercises for class but running into two problems. I can’t seem to get the 2nd function randomViewer() to work correctly so that it pulls a random style selection from the CSS page for Message Cell2.

Additionally I keep getting an error message for the way I’m calling the radio button values and I dont know what I am doing wrong there either.

I know there is probably a much more elegant solution to all of this, but what I need is if someone could point out the mistakes I am making so that I can correct them. 

<head>
    <title>Assignment 9 Solution</title>
    <link href="a9.css" rel="stylesheet" type="text/css"></link>
    <script>
        var cyclingIndex = 0;

        function cyclingViewer() {
            if (cyclingIndex > 20) cyclingIndex = 0;
            else cyclingIndex++;
            var mc = document.getElementById("MessageCell1");
            mc.className = "myStyle" + cyclingIndex;
            setTimeout("cyclingViewer()", 1000);
            return;
        }
        var randomIndex = 0;

        function randomViewer() {
            randomIndex = Math.floor(Math.random() * 20);
            randomIndex++;
            var mc = document.getElementById("MessageCell2");
            mc.className = "myStyle" + randomIndex;
            setTimeout("randomViewer()", 1000);
            return;
        }

        function selectViewer() {
            var mc = document.getElementByID("MessageCell3");
            mc.style.color = getRadioValue(document.styleForm.color);
            mc.style.fontFamily = getRadioValue(document.styleForm.family);
            mc.style.fontSize = getRadioValue(document.styleForm.sizes);
            mc.style.backgroundColor = getRadioValue(document.styleForm.background);
            return;
        }

        function getRadioValue(radioName) {
            for (i = 0; i < radioName.length; i++) {
                if (radioName[i].checked == true) return radioName[i].value;
            }
        }
    </script>
</head>

<body onload="cyclingViewer();" onload="randomViewer();">
    <table align="center" border="1" bordercolor="black">
        <tr>
            <td align="center">
                <font size="3">
                    <b>STYLE CLASS VIEWER</b>
                </font>
            </td>
        </tr>
        <tr>
            <td id="MessageCell1" align="center" height="50" width="400" class="myStyle1">
                <div id="MessageText">Hello World Wide Web!</div>
            </td>
        </tr>
    </table>
    <hr/>
    <table align="center" border="1" bordercolor="black">
        <tr>
            <td align="center">
                <font size="3">
                    <b>STYLE CLASS VIEWER</b>
                </font>
            </td>
        </tr>
        <tr>
            <td id="MessageCell2" align="center" height="50" width="400" class="myStyle1">
                <div id="MessageText">Hello World Wide Web!</div>
            </td>
        </tr>
    </table>
    <hr/>
    <form name="styleForm">
        <table align="center" border="0">
            <tr>
                <td>
                    <table align="center" border="1" bordercolor="black">
                        <tr>
                            <td align="center">
                                <font size="3">
                                    <b>STYLE CLASS VIEWER</b>
                                </font>
                            </td>
                        </tr>
                        <tr>
                            <td id="MessageCell3" align="center" height "50" width="400" class="myStyle1">
                                <div id="MessageText">Hello World Wide Web!</div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        <h4>SELECT FONT COLOR:</h4>
                        <font face="Courier New">
                            <input name="color" value="red" type="radio">red
                            <input name="color" value="black" type="radio">black
                            <input name="color" value="blue" type="radio">blue
                            <input name="color" value="green" type="radio">green
                            <input name="color" value="white" type="radio">white</font>
                    </p>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        <h4>Select Font Family:</h4>
                        <font face="Courier New">
                            <input name="family" value="Arial" type="radio">Arial
                            <input name="family" value="Veranda" type="radio">Veranda
                            <input name="family" value="Courier" type="radio">Courier
                            <input name="family" value="Times" type="radio">Times
                            <input name="family" value="Helvetica" type="radio">Helvetica</font>
                    </p>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        <h4>Select Font Size:</h4>
                        <font face="Courier New">
                            <input name="sizes" value="12" type="radio">12
                            <input name="sizes" value="18" type="radio">18
                            <input name="sizes" value="24" type="radio">24
                            <input name="sizes" value="30" type="radio">30</font>
                    </p>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        <h4>Select Background Color:</h4>
                        <font face="Courier New">
                            <input name="background" value="red" type="radio">red
                            <input name="background" value="blue" type="radio">blue
                            <input name="background" value="green" type="radio">green
                            <input name="background" value="black" type="radio">black
                            <input name="background" value="white" type="radio">white</font>
                    </p>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="Change Style" onClick="selectViewer()">
                </td>
            </tr>
        </table>
    </form>
</body>

and the CSS style sheet a9.css

myStyle1  {color:black; font-family:Arial; font-size:12; background-color:green}
myStyle2  {color:black; font-family:Arial; font-size:18; background-color:red}
myStyle3  {color:black; font-family:Arial; font-size:24; background-color:blue}
myStyle4  {color:black; font-family:Arial; font-size:30; background-color:white}
myStyle5  {color:red; font-family:Verdana; font-size:12; background-color:yellow}
myStyle6  {color:red; font-family:Verdana; font-size:18; background-color:green}
myStyle7  {color:red; font-family:Verdana; font-size:24; background-color:white}
myStyle8  {color:red; font-family:Verdana; font-size:30; background-color:blue}
myStyle9  {color:green; font-family:Courier; font-size:12; background-color:white}
myStyle10 {color:green; font-family:Courier; font-size:18; background-color: red}
myStyle11 {color:green; font-family:Courier; font-size:24; background-color:yellow}
myStyle12 {color:green; font-family:Courier; font-size:30; background-color: purple}
myStyle13 {color:blue; font-family:Times; font-size:12; background-color:yellow}
myStyle14 {color:blue; font-family:Times; font-size:18; background-color:white}
myStyle15 {color:blue; font-family:Times; font-size:24; background-color:red}
myStyle16 {color:blue; font-family:Times; font-size:30; background-color:green}
myStyle17 {color:white; font-family:Helvetica; font-size:12; background-color:black}
myStyle18 {color:white; font-family:Helvetica; font-size:18; background-color:green}
myStyle19 {color:white; font-family:Helvetica; font-size:24; background-color:red}
myStyle20 {color:white; font-family:Helvetica; font-size:30; background-color:blue}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can’t have multiple onLoad attributes in an element, so you should start by breaking things up a little.

        var cyclingIndex=0;
    var randomIndex=0;

    function initializeViewers(){
        setInterval(cyclingViewer,1000);
        setInterval(randomViewer,1000);
    }

    function cyclingViewer(){ ... (minus the setTimeout) }
    function randomViewer(){ ... (minus the setTimeout) }
    function selectViewer(){ ... }
    function getRadioValue(){ ... }

    There is a better way to architect this, though. You see, this way is dependent on global variables, which are bad.

    The way that is a little more safe (with minimal recoding) is this:

    function initialize() {
    var cyclingIndex, randomIndex, 
        cyclingViewer, randomViewer,
        selectViewer, getRadioValue;

    cyclingIndex=0;
    randomIndex=0;

    cyclingViewer = function() {
        ...
    };

    randomViewer = function() {
        ...
    };

    selectViewer = function() {
        ...
    };

    getRadioValue = function() {
        ...
    };

    getRadioValue = function() {
        ...
    };

    setInterval(cyclingViewer, 1000);
    setInterval(randomViewer, 1000);
}

    By encapsulating the functions as variables inside of the initialize function, you make it so that other people’s code can’t call yours (not important at this level, but saves you from screwing up later, in case you want to declare a new function with the same name. Functions declared inside initializeViewers() have access to the variables inside of it.

    Anyways, that should about do it.

    • 0