Tag Archives: innerHTML

The new development today on top of yesterday’s HTML Square Horizontal Rule Tracing Maths Grid Paper Tutorial is the coding for a game we used to play at school called the SOS Game. If the grid is filled up and the number of SOSs for each player is the same, then the game is a draw. The game can also be played where the player who creates an SOS is the winner and if no SOSs are created the game is a draw. A technique that came into play with this as far as user interaction is concerned was to involve select (dropdown) elements (surprise, surprise) with “size=3″ for the three choices ” ” (initially) or “S” or “O”. Once the user makes a non-blank choice we adjust that select (dropdown) element’s innerHTML to still be a dropdown but just with your selected value, nullifying any duplicate “onchange” event logics, on the understanding that the “onchange” event can’t be fired from a select (dropdown) element with only one option subelement. This is a game designed for more than one player so we organize two players to play the game in turns. Here is the initial drawing of the SOS Game grid … function sosize() { var itds=0; tds=document.getElementsByTagName(‘td’); var sqsi=0, ioffset=0; document.getElementById(‘myh4′).innerHTML+=’ … turn of Player1′ + score1 + ‘ versus Player2′ + score2; for (var itrs=0; itrs<5; itrs++) { for (var itds=eval(5 * itrs); itds<eval(5 + eval(5 * itrs)); itds++) { thisrect=tds[itds].getBoundingClientRect(); tds[itds].style.verticalAlign=’top’; sqsi=eval(2 * itds + ioffset); tds[itds].innerHTML='<select title=”” style=vertical-align:top;width:50%;height:50%;text-align:center; size=3 id=sqsi’ + sqsi + ‘ onchange=sosmove(this);><option value=” “> </option><option value=”S”>S</option><option value=”O”>O</option></select>’; tds[itds].innerHTML+='<select title=”” style=vertical-align:top;width:50%;height:50%;text-align:center; size=3 id=sqsi’ + eval(1 + sqsi) + ‘ onchange=sosmove(this);><option value=” “> </option><option value=”S”>S</option><option value=”O”>O</option></select>’; tds[itds].innerHTML+='<br><select title=”” style=vertical-align:bottom;width:50%;height:50%;text-align:center; size=3 id=sqsi’ + eval(10 + sqsi) + ‘ onchange=sosmove(this);><option value=” “> </option><option value=”S”>S</option><option value=”O”>O</option></select>’; tds[itds].innerHTML+='<select title=”” style=vertical-align:bottom;width:50%;height:50%;text-align:center; size=3 id=sqsi’ + eval(11 + sqsi) + ‘ onchange=sosmove(this);><option value=” “> </option><option value=”S”>S</option><option value=”O”>O</option></select>’; } ioffset+=10; } } Here is the analysis of a player’s SOS Game select (dropdown) element interaction … function checkifsos(t1, t2, t3) { //, camv) { //var score1=’ (0)’, score2=’ (0)’; //var amv=camv.split(‘.’)[0]; var retv=false; if (t1 >= 0 && t1 < 100 && t2 >= 0 && t2 < 100 && t3 >= 0 && t3 < 100) { if (document.getElementById(‘sqsi’ + t1).value == ‘S’ && document.getElementById(‘sqsi’ + t2).value == ‘O’ && document.getElementById(‘sqsi’ + t3).value == ‘S’) { if (thisplayer == 1) { document.getElementById(‘sqsi’