javascript doesn't change td's innerHTML at certain times

Forums » Opera for Windows/Mac/Linux » Opera browser

You need to be logged in to post in the forums. If you do not have an account, please sign up first.

Go to last post

14. April 2010, 19:40:15

javascript doesn't change td's innerHTML at certain times

link to the page with this code

i am almost done with my javascript tictactoe
but the place() function will work in everything but Opera (i've tried in iphone opera, win7 opera 10.10 and win7 opera 10.51)
i have checked the error console and there are no errors
i have put alert()s in saying what part of the code it's executing, and its functions as it should
i have tried changing the ids of the tds(used as the board) so that they dont contain numbers and it acts the same
i have tried changing place(id) to document.getElementById('id').innerHTML=Oid; and document.getElementById(id).innerHTML=Oid;, still nothing

it won't change the innerHTML anywhere where place() is called

<script type="text/javascript" language="javascript">

var xmove=true;
var players="<?php
if (strlen(stristr($agent, 'opera'))>0) print "1";else print"2";?>";//2 player selected as default in Opera until 1 player works
var dif="easy";
var end=false;
var owins=0;
var xwins=0;
var Oid="O";
var Xid="X";
var draws=0;

function changenumplayers(sel)
	{
	if (sel.value=="1")
		{
		document.getElementById('compdif').innerHTML="<select name='changedif' style=\"height:24px;\" onchange='changedif(this)'><option value='easy' style=\"height:14px;\">Easy</option><option value='medium' style=\"height:14px;\">Medium</option><option style=\"height:14px;\" value='hard'>Hard</option><option style=\"height:14px;\" value='omgwtf'>OmgWTF</option></select>";
		}
	else 
		document.getElementById('compdif').innerHTML="";
	players=sel.value;
	xmove=true;
	clearttt();
	owins=0;
	xwins=0;
	draws=0;
	document.getElementById('wins').innerHTML="X has won 0 times
O has won 0 times
0 Draws.";
	}
function changedif(sel)
	{
	xmove=true;
	dif=sel.value;
	clearttt();
	owins=0;
	xwins=0;
	document.getElementById('wins').innerHTML="X has won 0 times
O has won 0 times
0 Draws.";
	}
function selmove(spot)
	{
	if (!end)
		{
		if (spot.innerHTML!=Xid && spot.innerHTML !=Oid)
			{
			spot.innerHTML=xmove ? Xid : Oid ;
			if (players=="2")
				{xmove=xmove ? false : true ;
			wincheck();
			}
			if (players=="1")
				{
				if (dif=="easy")
					{aieasy();}
				if (dif=="medium")
					{aimed();}
				if (dif=="hard")
					{aihard();}
				if (dif=="omgwtf")
					{aiomgwtf();}
				}
		 	}
	 	}
	}
function randint(mi,ma)
	{return Math.round(mi + Math.random()*(ma-mi));}
function aieasy()
	{
	moved=false;
	count=0;
	var ri=0;
	while (!moved)
		{
		count++;
		ri=randint(1,9);
		if (document.getElementById(ri).innerHTML=="&nbsp;")
			{
			place(document.getElementById(ri));
			moved=true;
			}
		if (count==9)
			moved=true;
		}
	wincheck()
	}
function aimed()
	{
	moved=false;
	var board= new Array("&nbsp;",document.getElementById("1").innerHTML,document.getElementById("2").innerHTML,document.getElementById("3").innerHTML,document.getElementById("4").innerHTML,document.getElementById("5").innerHTML,document.getElementById("6").innerHTML,document.getElementById("7").innerHTML,document.getElementById("8").innerHTML,document.getElementById("9").innerHTML)
	if ((!moved)&& ((board[7]==board[5])&&board[7]!="&nbsp;") && board[3]=="&nbsp;")
		{
		place(document.getElementById("3"));
		moved=true;
		}
	if ((!moved)&& ((board[7]==board[3])&&board[7]!="&nbsp;") && board[5]=="&nbsp;")
		{
		place(document.getElementById("5"));
		moved=true;
		}
	if ((!moved)&& ((board[3]==board[5])&&board[3]!="&nbsp;") && board[7]=="&nbsp;")
		{
		place(document.getElementById("7"));
		moved=true;
		}
	if ((!moved)&& ((board[9]==board[5])&&board[9]!="&nbsp;") && board[1]=="&nbsp;")
		{
		place(document.getElementById("1"));
		moved=true;
		}
	if ((!moved)&& ((board[1]==board[5])&&board[1]!="&nbsp;") && board[9]=="&nbsp;")
		{
		place(document.getElementById("9"));
		moved=true;
		}
	if ((!moved)&& ((board[9]==board[1])&&board[1]!="&nbsp;") && board[5]=="&nbsp;")
		{
		place(document.getElementById("5"));
		moved=true;
		}
	for(i=7;i>=1;i-=3)
		{
		if ((!moved)&& ((board[i]==board[i+1])&&board[i]!="&nbsp;") && board[i+2]=="&nbsp;")
			{
			place(document.getElementById(i+2));
			moved=true;
			}
	 	if ((!moved)&& ((board[i]==board[i+2])&&board[i]!="&nbsp;") && board[i+1]=="&nbsp;")
			{
			place(document.getElementById(i+1));
			moved=true;
			}
		if ((!moved)&& ((board[i+1]==board[i+2])&&board[i+1]!="&nbsp;") && board[i]=="&nbsp;")
			{
			place(document.getElementById(i));
			moved=true;
			}
		}
	
	for(i=1;i<=3;i++)
		{
		if ((!moved)&& ((board[i]==board[i+3])&&board[i]!="&nbsp;") && board[i+6]=="&nbsp;")
			{
			place(document.getElementById(i+6));
			moved=true;
			}
		if ((!moved)&& ((board[i]==board[i+6])&&board[i]!="&nbsp;") && board[i+3]=="&nbsp;")
			{
			place(document.getElementById(i+3));
			moved=true;
			}
		if ((!moved)&& ((board[i+3]==board[i+6])&&board[i+3]!="&nbsp;") && board[i]=="&nbsp;")
			{
			place(document.getElementById(i));
			moved=true;
			}
		}

	if (!moved)
		{aieasy();}
	wincheck();
	}
function aihard()
	{
	var moved=false;
	var board= new Array("",document.getElementById("1").innerHTML,document.getElementById("2").innerHTML,document.getElementById("3").innerHTML,document.getElementById("4").innerHTML,document.getElementById("5").innerHTML,document.getElementById("6").innerHTML,document.getElementById("7").innerHTML,document.getElementById("8").innerHTML,document.getElementById("9").innerHTML)
 
	var flagged=new Array;
	var fspots=new Array(0,0);
	flagged=flagspots();
	var flags=0;
	for (i=1;i<10;i++)
	 {flags= (flagged[i])? flags+1 : flags;
	 fspots[((fspots[0]!=0) ? 1:0)]= (flagged[i])? i:0;
	 }
 
	if (flags==2)
	 {
	 if(flagged[5])
	 {
	 place(document.getElementById("5"));
	 moved=true;
	 }
	 for(i=9;i>0;i-=2)
	 if ((flagged[i])&&(!moved))
	 {
	 place(document.getElementById(i));
	 moved=true;
	 }
	 for(i=8;i>0;i-=2)
	 if ((flagged[i])&&(!moved))
	 {
	 place(document.getElementById(i));
	 moved=true;
	 }
	 }
 
	if ((!moved)|| flags<2)
	 aimed();
	wincheck()
	}
function flagspots()
	{
	var board= new Array("&nbsp;",document.getElementById("1").innerHTML,document.getElementById("2").innerHTML,document.getElementById("3").innerHTML,document.getElementById("4").innerHTML,document.getElementById("5").innerHTML,document.getElementById("6").innerHTML,document.getElementById("7").innerHTML,document.getElementById("8").innerHTML,document.getElementById("9").innerHTML)
 
	var flagged= new Array(false,false,false,false,false,false,false,false,false,false);
// 2 adjacent edge
	if ((board[8]==board[4]) && board[8]!="&nbsp;")
	 {if (board[7]=="&nbsp;")
	 flagged[7]=true;
	 if (
	 (board[5]=="&nbsp;")&& 
	 (
	 (
	 (board[2]!="&nbsp;")
	 &&(board[2]==board[8])
	 )
	 ||
	 (
	 ((board[6]!="&nbsp;")
	 &&(board[6]==board[8]))
	 )
	 )
	 )
	 flagged[5]=true;
	 }

	if ((board[8]==board[6]) && board[8]!="&nbsp;")
	 {if (board[9]=="&nbsp;")
	 flagged[9]=true;
	 if (
	 (board[5]=="&nbsp;")&& 
	 (
	 (
	 (board[2]!="&nbsp;")
	 &&(board[2]==board[8])
	 )
	 ||
	 (
	 ((board[6]!="&nbsp;")
	 &&(board[6]==board[4]))
	 )
	 )
	 )
	 flagged[5]=true;
	 }

	if ((board[6]==board[2]) && board[2]!="&nbsp;")
	 {if (board[3]=="&nbsp;")
	 flagged[3]=true;
	 if (
	 (board[5]=="&nbsp;")&& 
	 (
	 (
	 (board[2]!="&nbsp;")
	 &&(board[2]==board[8])
	 )
	 ||
	 (
	 ((board[6]!="&nbsp;")
	 &&(board[6]==board[4]))
	 )
	 )
	 )
	 flagged[5]=true;
	 }
 
	if ((board[2]==board[4]) && board[2]!="&nbsp;")
	 {if (board[1]=="&nbsp;")
	 flagged[1]=true;
	 if (
	 (board[5]=="&nbsp;")&& 
	 (
	 (
	 (board[2]!="&nbsp;")
	 &&(board[2]==board[8])
	 )
	 ||
	 (
	 ((board[6]!="&nbsp;")
	 &&(board[6]==board[4]))
	 )
	 )
	 )
	 flagged[5]=true;
	 }
 
// / diag test
 
	if (((board[9]==board[5])&&board[9]!="&nbsp;")&&board[1]=="&nbsp;")
		flagged[1]=true;
	if (((board[9]==board[1])&&board[9]!="&nbsp;")&&board[5]=="&nbsp;")
		flagged[5]=true;
	if (((board[1]==board[5])&&board[1]!="&nbsp;")&&board[9]=="&nbsp;")
		flagged[9]=true;

// \ diag test
 
	if (((board[7]==board[5])&&board[7]!="&nbsp;")&&board[3]=="&nbsp;")
		flagged[3]=true;
	if (((board[7]==board[3])&&board[7]!="&nbsp;")&&board[5]=="&nbsp;")
		flagged[5]=true;
	if (((board[5]==board[3])&&board[5]!="&nbsp;")&&board[7]=="&nbsp;")
		flagged[7]=true;

// hori test
 
	for (i=7;i>0;i-=3)
		{
		if (((board[i]==board[i+1])&&board[i]!="&nbsp;")&&board[i+2]=="&nbsp;")
			flagged[i+2]=true;
		if (((board[i+1]==board[i+2])&&board[i+2]!="&nbsp;")&&board[i]=="&nbsp;")
			flagged[i]=true;
		if (((board[i]==board[i+2])&&board[i+2]!="&nbsp;")&&board[i+1]=="&nbsp;")
			flagged[i+1]=true;
		}

// vert test

	for (i=1;i<4;i++)
		{
		 if (((board[i]==board[i+3])&&board[i]!="&nbsp;")&&board[i+6]=="&nbsp;")
		 	flagged[i+6]=true;
		if (((board[i+3]==board[i+6])&&board[i+6]!="&nbsp;")&&board[i]=="&nbsp;")
			flagged[i]=true;
		if (((board[i]==board[i+6])&&board[i+6]!="&nbsp;")&&board[i+3]=="&nbsp;")
			flagged[i+3]=true;
		}


	return flagged;
	}
function aiomgwtf()
	{
	ow=owins;
	xw=xwins;
	aihard();
	if ((xw==xwins)&&(ow==owins))
		aihard();
	}
function wincheck()
	{
	var board= new Array("&nbsp;",document.getElementById("1").innerHTML,document.getElementById("2").innerHTML,document.getElementById("3").innerHTML,document.getElementById("4").innerHTML,document.getElementById("5").innerHTML,document.getElementById("6").innerHTML,document.getElementById("7").innerHTML,document.getElementById("8").innerHTML,document.getElementById("9").innerHTML)
	var win="none";
	if ((board[1]!="&nbsp;")&&(board[2]!="&nbsp;")&&(board[3]!="&nbsp;")&&(board[4]!="&nbsp;")&&(board[5]!="&nbsp;")&&(board[6]!="&nbsp;")&&(board[7]!="&nbsp;")&&(board[8]!="&nbsp;")&&(board[9]!="&nbsp;"))
		win="draw";
	if (((board[9]==board[5])&&board[9]==Oid)&&board[1]==board[9])
		win="O";
	if (((board[7]==board[5])&&board[3]==Oid)&&board[3]==board[7])
		win="O";
	for (i=7;i>0;i-=3)
		{
		if (((board[i]==board[i+1])&&board[i]==Oid)&&board[i+2]==board[i])
			win="O";
		}
	for (i=1;i<4;i++)
		{
		if (((board[i]==board[i+3])&&board[i]==Oid)&&board[i+6]==board[i])
			win="O";
		}
 
	if (((board[9]==board[5])&&board[9]==Xid)&&board[1]==board[9])
		win="X";
	if (((board[7]==board[5])&&board[3]==Xid)&&board[3]==board[7])
		win="X";
	for (i=7;i>0;i-=3)
		{
		if (((board[i]==board[i+1])&&board[i]==Xid)&&board[i+2]==board[i])
			win="X";
		}
	for (i=1;i<4;i++)
		{
		if (((board[i]==board[i+3])&&board[i]==Xid)&&board[i+6]==board[i])
			win="X";
		}
	if (win!="none")
		{
		if (win!="draw")
		alert(win+' wins.');
		else alert("Draw.");
		if (win=="O") owins++;
		if (win=="X") xwins++;
		if (win=="draw") draws++;
		var s="s";
		if (draws==1)
		s="";
		document.getElementById('wins').innerHTML="X has won "+xwins+" times.
O has won "+owins+" times.
"+draws+" draw"+s+".";
		var type=(win=="X") ? "win": (win=="draw") ? "draw": "lose";
		if (type!="lose" && dif=="omgwtf")
			{
			sendtodb(type);
			}
		clearttt();
		}
	}
function place(spot)
	{spot.innerHTML=Oid;}
function clearttt()
	{
	for (i=1;i<10;i++)
		{
		document.getElementById(i).innerHTML="&nbsp;";
		}
		xmove=true;
	}
</script>


<div class="tttdiv"><div id="ttterr" >	<?php 
	$agent=strtolower($_SERVER['HTTP_USER_AGENT']);
    if (strlen(stristr($agent, 'opera'))>0)
	print "Sorry, but for some reason 1 player mode won&#039;t ******* work in Opera.";?></div>
<noscript >Javascript must be enabled to play Javascript Tictactoe.</noscript>
<table id="ttt" >
<tr>
<td  class="b r" id="7" onclick="selmove(this);" align="center" >&nbsp;</td>
<td align="center" id="8" class="b r" onclick="selmove(this);" >&nbsp;</td>
<td align="center" id="9" class="b" onclick="selmove(this);" >&nbsp;</td></tr>
<tr>
<td align="center" class="b r" id="4" onclick="selmove(this);" >&nbsp;</td>
<td align="center" class="b r" id="5" onclick="selmove(this);" >&nbsp;</td>
<td align="center" class="b" id="6" onclick="selmove(this);" >&nbsp;</td></tr>
<tr>
<td align="center" class="r" id="1" onclick="selmove(this);" >&nbsp;</td>
<td align="center" id="2" onclick="selmove(this);" class="r" >&nbsp;</td>
<td align="center" id="3" onclick="selmove(this);"  >&nbsp;</td></tr>
</table>
<div name="wins" id="wins">X has won 0 times
O has won 0 times
0 Draws.</div>
<select style="height:24px;" name="changeplaysel" id="changeplaysel" onchange="changenumplayers(this)" >
<option value="1" style="height:14px;">1 Player</option>
<option value="2"    <?php
if (strlen(stristr($agent, 'opera'))>0) print "selected=\"selected\"";?> style="height:14px;">2 Players</option>
</select><div name="compdif" id="compdif" ></div>
<script type="text/javascript" language="javascript">


if (document.getElementById('changeplaysel').value=="1")
	{document.getElementById('compdif').innerHTML="<select name='changedif' style=\"height:24px;\" onchange='changedif(this)'><option value='easy' style=\"height:14px;\">Easy</option><option value='medium' style=\"height:14px;\">Medium</option><option style=\"height:14px;\" value='hard'>Hard</option><option style=\"height:14px;\" value='omgwtf'>OmgWTF</option></select>";}
else 
	document.getElementById('compdif').innerHTML="";

</script>
<input type="button" value="Clear board" name="clear" onclick="clearttt()" class="inputbutton" />
</div>

15. April 2010, 16:45:45

perivision

Posts: 2

I have the same issue with my app twittFilter.com

Its random.. There are times the innerHTML will work, times it will just update the page.

16. April 2010, 11:43:08

bump

seriously, is there a workaround?

17. April 2010, 22:47:22

bump

the lack of support isn't random, it doesn't work, everytime

3. May 2010, 14:20:24

bump, anyone at all?

3. May 2010, 17:50:55 (edited)

ok i have found what part of the problem is, a td with an innerHTML of &nbsp; is considered to have null innerHTML instead of &nbsp;
wtf

3. May 2010, 14:42:47

jp10558

Posts: 4163

Perhaps submit a bug?
Opera 12; Windows 7 x64 SP1; Intel Xeon W3550; 12GB DDR 1333; 3.5M/128k DSL ; Comodo IS 5.10;Proxomitron 4.5j Sidki 2010-10, Custom Filters;
Journal

6. May 2010, 15:20:03

jp10558

Posts: 4163

Seriously? Where:
http://lmgtfy.com/?q=opera+bug+report
Opera 12; Windows 7 x64 SP1; Intel Xeon W3550; 12GB DDR 1333; 3.5M/128k DSL ; Comodo IS 5.10;Proxomitron 4.5j Sidki 2010-10, Custom Filters;
Journal

6. May 2010, 19:13:11 (edited)

burnout426

Posts: 13195

Originally posted by therealisildur4:

ok i have found what part of the problem is, a td with an innerHTML of   is considered to have null innerHTML instead of  
wtf



Are you sure it's null and not "\xA0"?

Try this though (and view source of it). Firefox passes that (even with the HTML5 parser enabled in about:config), but Opera does not.

Forums » Opera for Windows/Mac/Linux » Opera browser