正在为类做一些 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}
最佳答案
你不能在一个元素中有多个 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 .
无论如何，应该就可以了。
关于javascript函数随机css样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10874658/