I am creating a website (just for fun) where you can play the game SET. Now an unstable problem has arisen which I do not understand.
The user selects the squares by clicking on them (the board consists of floating div elements with images inside them). When you click, the div div turns yellow.
The undesirable behavior that occurs here is that when the user clicks on the first DIV to select it, the other div becomes highlighted (see below). The worst part is that the problem only occurs periodically, maybe once every five times the user begins to select a set. I am not sure which code to send, since I really can’t figure out what is the source of the error.
Here is the code that makes the squares light up, although I'm not at all sure that the error is in this code:
var myDown = isIOS ? "touchstart" : "mousedown";
$(".cell").on(myDown,function(event) {
if (declared == true) {
if ($(this).hasClass('on')) {
$(this).removeClass('on');
} else {
if ($('.cell.on').length <3) {
$(this).addClass('on');
}
}
if ($('.cell.on').length == 3) {
$submitButton.addClass('ready');
setTimeout(delayedSubmit,400);
}
}
});
Here is a screenshot of the problem:
The square highlighted in blue should not be highlighted at all. I clicked on the square in the third column, second row, and this square has a yellow border to indicate that it was clicked.
In the end, I think I just hope that someone else will have a similar experience with an unusual, unwanted DIV backlight to suggest a possible reason.
EDIT: Here is some HTML
<div id="board" class="">
<div id="A1" class="cell">
<div class="box">
<a class="stretchy no-limit" href="#"><img class="spacer" src="/img/spacer.png" alt="spacer"><img class="sprite one empty" id="c0012" alt="card" src="/img/12.png"></a>
</div>
</div>
<div id="B1" class="cell">
<div class="box">
<a class="stretchy no-limit" href="#"><img class="spacer" src="/img/spacer.png" alt="spacer"><img class="sprite three empty" id="c2001" alt="card" src="/img/01.png"></a>
</div>
</div>
<div id="C1" class="cell">
<div class="box">
<a class="stretchy no-limit" href="#"><img class="spacer" src="/img/spacer.png" alt="spacer"><img class="sprite one solid" id="c0202" alt="card" src="/img/02.png"></a>
</div>
</div>
and etc.
source
share