javascript - Memory game is removing any div even if the innerHTMLs do not match -
i creating basic memory game. want remove divs if first clicked div's innerhtml matches second, reason remove divs no matter 2 divs clicked. how fix issue?
var picker = null; var pickertwo = null; var count = 0; function flip(event) { if (count === 0) { event.currenttarget.style.opacity = "1"; picker = event.currenttarget; count++; } else if (count === 1) { event.currenttarget.style.opacity = "1"; pickertwo = event.currenttarget; if (picker.innerhtml === pickertwo.innerhtml) { settimeout(function() { var bigboy = picker.parentnode; var littleboy = pickertwo.parentnode; bigboy.removechild(picker); littleboy.removechild(pickertwo); bigboy.parentnode.removechild(bigboy); littleboy.parentnode.removechild(littleboy); }, 800); } else if (picker.innerhtml != pickertwo.innerhtml) { settimeout(function() { picker.style.opacity = "0"; pickertwo.style.opacity = "0"; }, 800); } count = 0; } }
.card2 { background-color: #425dff; width: 100px; height: 100px; margin-bottom: 10px; }
<head> <title>memory</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="theboard"> <div id="case1"> <div class="card2" onclick="flip(event)">a</div> </div> <div id="case2"> <div class="card2" onclick="flip(event)">a</div> </div> <div id="case3"> <div class="card2" onclick="flip(event)">b</div> </div> <div id="case4"> <div class="card2" onclick="flip(event)">b</div> </div> </div> <script src="js/app.js"></script>
you setting opacity zero
picker.style.opacity = "0"; pickertwo.style.opacity = "0";
so hiding elements.
i think want number greater zero.
Comments
Post a Comment