J
Jim Aikin
I'm in the very beginning stages of learning JavaScript, so apologies in
advance for the dumb question(s). As a learning experience, I've created
a random haiku generator. This uses an external .js file to generate the
actual text.
It works as expected in IE7: Clicking on a button chooses a new line or
lines of text at random. But it doesn't work in FireFox 2. (Yes,
JavaScript is enabled in the FF Options > Content box.) The buttons
don't do anything, and the haiku is never displayed, only the dummy text
(g, f, and p in the three div lines below).
I suspect the problem may be with innerHTML -- or possibly it has to do
with how I'm loading the external file. I've poked around on the Web and
haven't found any clues, so here I am. Code follows -- suggestions
appreciated!
--Jim Aikin
// begin main page code
<head><title>Test Page</title>
<script type="text/javascript" src="lineGenerator.js">
</script>
</head>
<body>
<div id="Line1"><p>g </div>
<div id="Line2"><p>f </div>
<div id="Line3"><p>d </div>
<div id="randomNum">
<script type="text/javascript">
new function randomizeLine (lineNum) {
var lineText;
switch(lineNum) {
case 1:
lineText = generateLine(1);
document.getElementById('Line1').innerHTML = lineText;
break;
case 2:
lineText = generateLine(2);
document.getElementById('Line2').innerHTML = lineText;
break;
case 3:
lineText = generateLine(3);
document.getElementById('Line3').innerHTML = lineText;
}
}
new function randomizeAll() {
randomizeLine(1);
randomizeLine(2);
randomizeLine(3);
}
onload = "randomizeAll();"
</script>
<noscript>
Either your browser does not support JavaScript, or you have
turned it off.
</noscript>
</div>
<form>
<input type="button" name="Line1" value="Line 1"
onClick="randomizeLine(1)"; />
<input type="button" name="Line2" value="Line 2"
onClick="randomizeLine(2)"; />
<input type="button" name="Line3" value="Line 3"
onClick="randomizeLine(3)"; />
<br><br>
<input type="button" name="AllNew" value="Regenerate All"
onClick="randomizeAll()"; />
</form>
</body>
//end main page code -- begin external file code
function generateLine(lineNum) {
var randNum = Math.ceil(4*Math.random());
var lineText;
if (lineNum == 1)
switch(randNum) {
case 1:
lineText = "In the white morning";
break;
case 2:
lineText = "Along a river";
break;
case 3:
lineText = "Behind the cottage";
break;
default:
lineText = "When deep night arrives";
}
if (lineNum == 2)
switch(randNum) {
case 1:
lineText = "I tread carefully, choosing";
break;
case 2:
lineText = "the stone statues fall backward";
break;
case 3:
lineText = "a young boy weeps and plays dice";
break;
default:
lineText = "monkeys dance like dervishes";
}
if (lineNum == 3)
switch(randNum) {
case 1:
lineText = "without knowing it.";
break;
case 2:
lineText = "as the bright moon weeps.";
break;
case 3:
lineText = "while flutes trill for days.";
break;
default:
lineText = "despite the barricade.";
}
return lineText;
}
// end external file code
advance for the dumb question(s). As a learning experience, I've created
a random haiku generator. This uses an external .js file to generate the
actual text.
It works as expected in IE7: Clicking on a button chooses a new line or
lines of text at random. But it doesn't work in FireFox 2. (Yes,
JavaScript is enabled in the FF Options > Content box.) The buttons
don't do anything, and the haiku is never displayed, only the dummy text
(g, f, and p in the three div lines below).
I suspect the problem may be with innerHTML -- or possibly it has to do
with how I'm loading the external file. I've poked around on the Web and
haven't found any clues, so here I am. Code follows -- suggestions
appreciated!
--Jim Aikin
// begin main page code
<head><title>Test Page</title>
<script type="text/javascript" src="lineGenerator.js">
</script>
</head>
<body>
<div id="Line1"><p>g </div>
<div id="Line2"><p>f </div>
<div id="Line3"><p>d </div>
<div id="randomNum">
<script type="text/javascript">
new function randomizeLine (lineNum) {
var lineText;
switch(lineNum) {
case 1:
lineText = generateLine(1);
document.getElementById('Line1').innerHTML = lineText;
break;
case 2:
lineText = generateLine(2);
document.getElementById('Line2').innerHTML = lineText;
break;
case 3:
lineText = generateLine(3);
document.getElementById('Line3').innerHTML = lineText;
}
}
new function randomizeAll() {
randomizeLine(1);
randomizeLine(2);
randomizeLine(3);
}
onload = "randomizeAll();"
</script>
<noscript>
Either your browser does not support JavaScript, or you have
turned it off.
</noscript>
</div>
<form>
<input type="button" name="Line1" value="Line 1"
onClick="randomizeLine(1)"; />
<input type="button" name="Line2" value="Line 2"
onClick="randomizeLine(2)"; />
<input type="button" name="Line3" value="Line 3"
onClick="randomizeLine(3)"; />
<br><br>
<input type="button" name="AllNew" value="Regenerate All"
onClick="randomizeAll()"; />
</form>
</body>
//end main page code -- begin external file code
function generateLine(lineNum) {
var randNum = Math.ceil(4*Math.random());
var lineText;
if (lineNum == 1)
switch(randNum) {
case 1:
lineText = "In the white morning";
break;
case 2:
lineText = "Along a river";
break;
case 3:
lineText = "Behind the cottage";
break;
default:
lineText = "When deep night arrives";
}
if (lineNum == 2)
switch(randNum) {
case 1:
lineText = "I tread carefully, choosing";
break;
case 2:
lineText = "the stone statues fall backward";
break;
case 3:
lineText = "a young boy weeps and plays dice";
break;
default:
lineText = "monkeys dance like dervishes";
}
if (lineNum == 3)
switch(randNum) {
case 1:
lineText = "without knowing it.";
break;
case 2:
lineText = "as the bright moon weeps.";
break;
case 3:
lineText = "while flutes trill for days.";
break;
default:
lineText = "despite the barricade.";
}
return lineText;
}
// end external file code