Мини игра по поиску предметов, при нажатии на искомый предмет он исчезает "display: none". После того как все искомые предметы найдены, блок с игрой исчезает и появляется другой блок.
Проблема в том что после записи кода он сразу исполняет исчезновение основного блока с игрой игнорируя условия. Что я делаю не так?
проект на gitHub
Использую только JavaScript без JQuery
<body>
<div class="container">
<div id="begin" class="beginer"> <img class="bg" src="img/bg_ho.png" alt="bg">
<div class="tutorial1"><img class="tutorial" src="img/Tutorial1.png" alt="tutorial">
<p class="pulsate">Find all the
<br>hidden objects!</p>
</div>
<a href="#one" id="ap"> <img class="apple" id="apple" src="img/apple.png" alt="apple"> </a>
<a href="#two" id="sh"> <img class="shoe" id="shoe" src="img/shoe.png" alt="shoes"> </a>
<a href="#three" id="bk"> <img class="book" id="book" src="img/book.png" alt="book"> </a>
<a href="#for" id="pr"> <img class="purse" id="purse" src="img/purse.png" alt="apple"> </a>
<div class="bottom"><img class="bottom" src="img/ho_gui.png" alt="bottom">
<div class="text">
<ul>
<li>
<h1 id="one">Apple</h1></li>
<li>
<h1 id="two">Shoe</h1></li>
<li>
<h1 id="three">Book</h1></li>
<li>
<h1 id="for">Purse</h1></li>
</ul>
</div>
</div>
</div>
<div id="fs" class="finish"> <img class="blur" src="img/bg_blur.png" alt="bg"> </div>
</div>
<script>
//loss apple
document.getElementById('ap').onclick = function () {
document.getElementById('apple').style.display = 'none';
document.getElementById('one').style.textDecoration = 'line-through';
}
//loss shoe
document.getElementById('sh').onclick = function () {
document.getElementById('shoe').style.display = 'none';
document.getElementById('two').style.textDecoration = 'line-through';
}
//loss book
document.getElementById('bk').onclick = function () {
document.getElementById('book').style.display = 'none';
document.getElementById('three').style.textDecoration = 'line-through';
}
//loss purse
document.getElementById('pr').onclick = function () {
document.getElementById('purse').style.display = 'none';
document.getElementById('for').style.textDecoration = 'line-through';
}
</script>
<script>
if (document.getElementById('apple').style.display = 'none' && document.getElementById('shoe').style.display = 'none' && document.getElementById('book').style.display = 'none' && document.getElementById('purse').style.display = 'none') {
document.getElementById('begin').style.display = 'none';
}
</script>
