Having problem with the javascript of the code. PLZ check it out

Question

The code is for X and 0 game.
It consists of a onclick function 'show' that will send its block number as argument.
The function 'show' will change display from none to block.
https://code.sololearn.com/WgdyO5M9J270/#html

Answer 1

Your first problem directly related to your question is that 'box' class <div>s will never fire any 'click' event, as they are masked by your 'draw' id <svg> grid, wich is absolute positionned on top of them ;P
Fix consist to style your 'box' css class with one positioned mode an give it a 'z-index' value greater than this defined for the 'draw' id (default is zero), and retrieve (delete) the 'background-color' definition of 'box' class (to have default transparent background so the <svg> grid will be still visible ^^)...

Fixed css class declaration:

.box{
float:left;
height:100px;
width:100px;
/*background-color:rgb(243,243,243);*/
position:relative;
z-index:1;
}

Now the 'click' event can occur, but your JS code will not already work as expected in all browsers: when building the DOM (Document Object Model) at parse time of Html document, some engine are retrieving the empty text nodes (white spaces, empty new lines) between elements nodes, some others keep them, so methods and attributes of DOM API as '.firstChild' or '.lastChild' are not always returning the expected node (could be a text node, when an html element node is expected).

One workaround is to select first and last child through the use of .querySelector() method with benefit of powerful of css selectors:

//var change=x.lastChild;
var change=x.querySelector('svg:first-child');

(and same for last child)

At this point, when 'click' event occurs, you are displaying both circle and cross svg shapes on the 'box' clicked... because your first condition 'if (set==0)' is true, its body is executed, inside which you turn 'set' variable to one. So, right nexr, your second condition 'if (set==1)' will be also true ^^

Probably expected behaviour require fix by adding an 'else' statement before the second condition:

//if (set==1)
else if (set==1)

Anyway, you have a tiny not blocking missing space remaining between id value and 'class' keyword in your html:

<div id="8" class="box" onclick="show(8)">