Question

I have run into a strange problem, i am creating a lot of dynamically divs. And i recently found out that some of my divs doesn’t fire the onclick event? All the divs are created using the same template, so why are some not working? Most of the time, its the 4-5 from the bottom. If you click on one of the others and then try again, you might get one of those to trigger. But only sporadically.

Code to create the divs:

// Code to loop thru the number of players and create the divs accordingly
for (fieldNumber = 0; fieldNumber < 18; fieldNumber++) {
        var holderDiv = CreateDiv('gameCellLarge', '');
        holderDiv.style.width = 150 + extraCellWidth + 'px'; // Ändra storleken beroende på antalet spelare

        if (fieldNumber == 0 || fieldNumber == 6 || fieldNumber == 8 || fieldNumber == 17)
            newField = CreateDiv('gameCellMedium borderFull gameText', gameText[fieldNumber]);
        else
            newField = CreateDiv('gameCellMedium borderWithoutTop gameText', gameText[fieldNumber]);
        holderDiv.appendChild(newField);

        for (playerNumber = 0; playerNumber < players.length; playerNumber++) {            
            holderDiv.appendChild(players[playerNumber].InitField(fieldNumber));
        }
        gameFieldDiv.appendChild(holderDiv);
    }




GameField.prototype.InitField = function(fieldNumber) {
var newField = document.createElement("div");
if (fieldNumber == 0 || fieldNumber == 6 || fieldNumber == 8 || fieldNumber == 17)
    newField.className = 'gameCellSmall borderFull gameText gameTextAlign';
else
    newField.className = 'gameCellSmall borderWithoutTop gameText gameTextAlign';

var instance = this;
if (fieldNumber == 6 || fieldNumber == 7 || fieldNumber == 17) { }
else
    newField.onclick = function() { instance.DivClick(fieldNumber); return false; }

this.fields[fieldNumber] = newField;
this.score[fieldNumber] = 0;
return newField;
}

I added the return false to the click function, but it still behaves strangely. Why are some not triggering? I create around 18 divs / player. But it happens even if i just create one player.

Do i perhaps need to cancel the event once i am done with it? (Like the return false; is trying to do)
Works sometimes but not always…

I have run out of ideas, here is a link to the script. Maybe i have just missed something.
The script
I have changed it a bit, so just press the button and click on the lower end of the game field (yatzy, kåk etc). It should popup alerts when clicked. Sometimes they work sometimes they don’t.

Answer 1

Your code appears to be fine, it looks like the CSS is messing things up.

The problem is that the ‘gameCellLarge’ divs are getting out of phase with the ‘gameCellMedium’ and ‘gameCellSmall’ divs that they enclose. This is because they have a ‘position:relative;’ style attribute which allows them to wander from where they should be. (You can visually see what’s happening by using the debugger that comes with most browsers, e.g. Firebug with Firefox, or the Developer Tools with Chrome.)

Only the portion of a ‘gameCellSmall’ box that overlaps with its enclosing ‘gameCellLarge’ box is clickable. You’ll find that all the boxes have a clickable region, but that the region shrinks as you get to the bottom of the table. That’s because the large cells get more and more out of phase with the small cells as you go down the table. But if you click toward the top of a box it will work, although if you don’t realize this it will seem that the response is random and sporadic.

Anyways, you can fix this problem by removing ‘position:relative’ from the .gameCellLarge style. This doesn’t seem to make a difference to the layout, so it should be OK to do this. You could also specify ‘border:1px solid black;’ in the .gameCellLarge style.

Hope this helps.