I am creating a basic memory game. I want to remove the divs if the first clicked div's innerHTML matches the second, but for some reason it remove the divs no matter which two divs are clicked. How do I fix this 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 are setting opacity to zero
so you are hiding the elements.
I think you want a number greater than zero.