Catman
04-28-2003, 12:57 AM
I'm running into an odd problem with innerHTML and Netscape 7 on this page (http://www1.iastate.edu/~wsthune/cps/filmchimps/).
Clicking the Start button should (among other things) change the button contents to 'Next' while the dialogue cycles and then to 'Restart' at the end.
The button does change to 'Next', but when it's supposed to change to 'Restart', 'Next' merely gets bumped down inside the button.
Here's the relevant portion of the page:
<script type="text/javascript">
//<![CDATA[
//<!--
line1 = "Hey, Oliver, what kind of movie is this?";
line2 = "They call it <i>cinéma vérité<\/i>, Lester.";
line3 = "What\'s that mean?";
line4 = "It\'s French for<br \/><i>we lost the script<\/i>.";
framenumber=0;
function runJoke(framenumber)
{
Lester=document.getElementById("first");
Oliver=document.getElementById("second");
imageLocation=document.getElementById("chimps");
buttonID=document.getElementById("nextbutton");
switch (framenumber)
{
case 0 : { buttonID.innerHTML="Restart"; imageLocation.src="munching.gif"; Oliver.style.visibility="hidden"; break; }
case 1 : { buttonID.innerHTML="Next"; imageLocation.src="leftspeak.gif"; Lester.innerHTML=line1; Lester.style.visibility="visible"; break; }
case 2 : { imageLocation.src="rightspeak.gif"; Oliver.innerHTML=line2; Oliver.style.visibility="visible"; Lester.style.visibility="hidden"; break; }
case 3 : { imageLocation.src="leftspeak.gif"; Lester.innerHTML=line3; Lester.style.visibility="visible"; Oliver.style.visibility="hidden"; break; }
case 4 : { imageLocation.src="rightspeak.gif"; Oliver.innerHTML=line4; Oliver.style.visibility="visible"; Lester.style.visibility="hidden"; break; }
}
}
//-->
//]]>
</script>
</head>
<body>
<div class="main">
<h1>Lester and Oliver<br />Watchin' the Movies</h1>
<p id="second" class="balloon2"></p>
<p id="first" class="balloon1"></p>
<img id="chimps" src="munching.gif" alt="Image Description : Two chimpanzees sitting in easy chairs and eating popcorn" />
<p>
<button id="nextbutton" onclick="framenumber++; if (framenumber > 4) framenumber=0; runJoke(framenumber);">Start</button>
</p>
</div>
</body>
What seems to be happening is that the second buttonID.innerHTML chokes -- if I remove that from case 0, the same thing happens as soon as case 1 runs.
The page does work as expected with IE 6 (in case anyone is wondering).
Clicking the Start button should (among other things) change the button contents to 'Next' while the dialogue cycles and then to 'Restart' at the end.
The button does change to 'Next', but when it's supposed to change to 'Restart', 'Next' merely gets bumped down inside the button.
Here's the relevant portion of the page:
<script type="text/javascript">
//<![CDATA[
//<!--
line1 = "Hey, Oliver, what kind of movie is this?";
line2 = "They call it <i>cinéma vérité<\/i>, Lester.";
line3 = "What\'s that mean?";
line4 = "It\'s French for<br \/><i>we lost the script<\/i>.";
framenumber=0;
function runJoke(framenumber)
{
Lester=document.getElementById("first");
Oliver=document.getElementById("second");
imageLocation=document.getElementById("chimps");
buttonID=document.getElementById("nextbutton");
switch (framenumber)
{
case 0 : { buttonID.innerHTML="Restart"; imageLocation.src="munching.gif"; Oliver.style.visibility="hidden"; break; }
case 1 : { buttonID.innerHTML="Next"; imageLocation.src="leftspeak.gif"; Lester.innerHTML=line1; Lester.style.visibility="visible"; break; }
case 2 : { imageLocation.src="rightspeak.gif"; Oliver.innerHTML=line2; Oliver.style.visibility="visible"; Lester.style.visibility="hidden"; break; }
case 3 : { imageLocation.src="leftspeak.gif"; Lester.innerHTML=line3; Lester.style.visibility="visible"; Oliver.style.visibility="hidden"; break; }
case 4 : { imageLocation.src="rightspeak.gif"; Oliver.innerHTML=line4; Oliver.style.visibility="visible"; Lester.style.visibility="hidden"; break; }
}
}
//-->
//]]>
</script>
</head>
<body>
<div class="main">
<h1>Lester and Oliver<br />Watchin' the Movies</h1>
<p id="second" class="balloon2"></p>
<p id="first" class="balloon1"></p>
<img id="chimps" src="munching.gif" alt="Image Description : Two chimpanzees sitting in easy chairs and eating popcorn" />
<p>
<button id="nextbutton" onclick="framenumber++; if (framenumber > 4) framenumber=0; runJoke(framenumber);">Start</button>
</p>
</div>
</body>
What seems to be happening is that the second buttonID.innerHTML chokes -- if I remove that from case 0, the same thing happens as soon as case 1 runs.
The page does work as expected with IE 6 (in case anyone is wondering).