0

クラスの JavaScript 演習に取り組んでいますが、2 つの問題が発生しています。Message Cell2のCSSページからランダムなスタイル選択を引き出すように、2番目の関数randomViewer()を正しく動作させることができないようです。

さらに、ラジオボタンの値を呼び出す方法についてエラーメッセージが表示され続け、そこで何が間違っているのかわかりません。

おそらくもっと洗練された解決策があることはわかっていますが、誰かが私が犯している間違いを指摘して修正できるようにする必要があります。

<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 に答える