javascript函數隨機css樣式

正在爲類一些JavaScript的練習，但遇到了兩個問題。我似乎無法使第二個函數randomViewer（）正常工作，以便它從Message Cell2的CSS頁面中抽取一個隨機樣式選擇。javascript函數隨機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}

來源

2012-06-03 Joshua Aslan Smith

小修復 - 在'selectViewer'中替換'getElementBy我* d *'和'getElementByI * d *' – neoascetic

其次修復 - 你有兩個'對身體onload'屬性，而只有一個是允許 – neoascetic

謝謝neoascetic！固定選擇查看器，現在整個部分工作正常！我猜我應該含有的我要做個有載運行，然後在功能的新功能，使該第三函數的onload功能。 –

你不能有多個屬性的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(){ ... }

雖然有一個更好的方法來設計這個。你看，這種方式取決於全局變量，which are bad。

這是一個小更安全（以最小的重新編碼）方式是這樣的：

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

通過封裝的初始化函數內的功能作爲變量，你讓這個其他人的代碼不能調用你（在這個級別並不重要，但是從後來搞砸了，萬一節省您要聲明一個新的功能，使用相同的名稱。Functions declared inside initializeViewers() have access to the variables inside of it。

不管怎麼說，應約做到這一點。

來源

2012-06-04 00:05:57 Chaosphere2112

javascript函數隨機css樣式

回答

相關問題