0

在课堂上做一些 javascript 练习，但遇到两个问题。我似乎无法让第二个函数 randomViewer() 正常工作，以便它从 Message Cell2 的 CSS 页面中提取随机样式选择。

此外，我不断收到有关我调用单选按钮值的方式的错误消息，我也不知道我在那里做错了什么。

我知道可能有一个更优雅的解决方案来解决所有这些问题，但我需要的是如果有人能指出我所犯的错误，以便我可以纠正它们。

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

和 CSS 样式表 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}
4

1 回答 1

1

你不能在一个元素中有多个 onLoad 属性，所以你应该先把事情分解一下。

    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(){ ... }

不过，有更好的方法来构建它。你看，这种方式依赖于全局变量，这 是 不好的。

更安全一点（重新编码最少）的方式是：

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

通过将函数封装为初始化函数中的变量，您可以使其他人的代码无法调用您的代码（在此级别上并不重要，但可以避免您以后搞砸，以防您想声明一个新函数）同名。在 initializeViewers() 中声明的函数可以访问其中的变量。

无论如何，应该这样做。

于 2012-06-04T00:05:57.470 回答