javascript function random css style
Question
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}
1 answers
solution1
1 ACCPTED 2012-06-04 00:05:57
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Change CSS style with Javascript function
Using a JavaScript function with CSS via <style>
Generating a 'random style' in JavaScript
Javascript simple style.display function only works at random
JQuery css() and JavaScript style
removing a css style with javascript
CSS to style textbox in javascript
Adding css style into javascript
CSS Style Javascript
change css style with javascript
Related Tags