@oleg_m23

Как сделать чтобы ссылки подсвечивались если не происходит ни каких действий?

Мини игра по поиску предметов, при нажатии на искомый предмет он исчезает "display: none". Как сделать чтобы первый по списку предмет подсвечиваля если пользователь не может их найти в течении 5сек. Использую только JavaScript без JQuery. GitHub
<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 class="lg"><img class="logo" src="img/logo.png" alt="no logo"></div>
            <button class="button" type="button"> <a href="#">Play Free</a> </button>
        </div>
    </div>
     <script>
        function impossibru() {
            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') {
                setTimeout(function () {
                    document.getElementById('begin').style.display = 'none';
                }, 1000)
            }
        }
        document.getElementById('ap').onclick = function () {
            document.getElementById('apple').style.display = 'none';
            document.getElementById('one').style.textDecoration = 'line-through';
            impossibru();
        };
        document.getElementById('sh').onclick = function () {
            document.getElementById('shoe').style.display = 'none';
            document.getElementById('two').style.textDecoration = 'line-through';
            impossibru();
        };
        document.getElementById('bk').onclick = function () {
            document.getElementById('book').style.display = 'none';
            document.getElementById('three').style.textDecoration = 'line-through';
            impossibru();
        };
        document.getElementById('pr').onclick = function () {
            document.getElementById('purse').style.display = 'none';
            document.getElementById('for').style.textDecoration = 'line-through';
            impossibru();
        };
        impossibru();
    </script>
</body>
  • Вопрос задан
  • 73 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы