У меня не получается активировать кнопку Enter.

dislav · May 11, 2021

Не думал что буду обращаться сюда. Я написал простую игру на JS. Активировать кнопку Enter не получается. Пытался найти решение в интернете. Если кому-то не трудно, помогите пожалуйста. Ещё подскажите в какую строку вставить активацию. Игру загрузил на бесплатный хостинг, можете посмотреть: http://f0535962.xsph.ru CyYeXySU_jU.jpg?size=1280x720&quality=96

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Guess</title>
    <style>
        html {
            font-family: sans-serif;
            font-size: 25px;
            text-align: center;
            color: white;
        }

        body {
            margin: 125px;
            background: linear-gradient(135deg, orange, salmon, coral, crimson);
            background-size: 400% 400%;
            animation: gradient 30s ease infinite;
        }

        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        h1 {
            font-size: 60px;
            margin: 30px;
        }

        input.guessField {
            width: 244px;
            height: 64px;
            font-size: 25px;
            color: white;
            background-color: transparent;
            border: 3px solid white;
            border-radius: 25px;
            outline: none;
            padding: 0px;
            transition: all 0.5s ease;
            text-align: center;
        }

        input.guessField:hover {
            border-color: rgb(255, 255, 120);
        }

        input.guessSubmit {
            width: 250px;
            height: 70px;
            font-size: 25px;
            color: white;
            background-color: transparent;
            border: 3px solid white;
            border-radius: 25px;
            outline: none;
            padding: 0px;
            transition: all 0.5s ease;
        }

        input.guessSubmit:hover {
            border-color: rgb(255, 255, 120);
        }

        button {
            width: 250px;
            height: 70px;
            font-size: 25px;
            color: white;
            background-color: transparent;
            border: 3px solid white;
            border-radius: 25px;
            outline: none;
            padding: 0px;
            transition: all 0.5s ease;
        }

        button:hover {
            border-color: rgb(255, 255, 120);
        }
    </style>
</head>

<body>
    <h1>Угадайте число от 1 до 100</h1>
    <input type="text" class="guessField" maxlength="3">
    <input type="submit" value="Отправить" class="guessSubmit">
    <div class="resultParas">
        <p class="guesses"></p>
        <p class="lastResult"></p>
        <p class="lowOrHi"></p>
    </div>
    <script>
        let randomNumber = Math.floor(Math.random() * 100) + 1;
        const guesses = document.querySelector('.guesses');
        const lastResult = document.querySelector('.lastResult');
        const lowOrHi = document.querySelector('.lowOrHi');
        const guessSubmit = document.querySelector('.guessSubmit');
        const guessField = document.querySelector('.guessField');
        let guessCount = 1;
        let resetButton;

        function checkGuess() {
            let userGuess = Number(guessField.value);
            if (guessCount === 1) {
                guesses.textContent = 'Предыдущие догадки: ';
            }
            guesses.textContent += userGuess + ' ';
            if (userGuess === randomNumber) {
                lastResult.textContent = 'Поздравляю! Вы угадали!';
                lowOrHi.textContent = '';
                setGameOver();
            } else if (guessCount === 5) {
                lastResult.textContent = 'Вы проиграли. Число: ' + randomNumber;
                lowOrHi.textContent = '';
                setGameOver();
            } else {
                lastResult.textContent = 'Неправильно.';
                if (userGuess < randomNumber) {
                    lowOrHi.textContent = 'Побробуйте взять число больше.';
                } else if (userGuess > randomNumber) {
                    lowOrHi.textContent = 'Побробуйте взять число меньше.';
                }
            }
            guessCount++;
            guessField.value = '';
            guessField.focus();
        }
        guessSubmit.addEventListener('click', checkGuess);

        function setGameOver() {
            guessField.disabled = true;
            guessSubmit.disabled = true;
            resetButton = document.createElement('button');
            resetButton.textContent = 'Начать новую игру';
            document.body.appendChild(resetButton);
            resetButton.addEventListener('click', resetGame);
        }

        function resetGame() {
            guessCount = 1;
            const resetParas = document.querySelectorAll('.resultParas p');
            for (let i = 0; i < resetParas.length; i++) {
                resetParas[i].textContent = '';
            }
            resetButton.parentNode.removeChild(resetButton);
            guessField.disabled = false;
            guessSubmit.disabled = false;
            guessField.value = '';
            guessField.focus();
            randomNumber = Math.floor(Math.random() * 100) + 1;
        }
    </script>
</body>

</html>

klierik · May 14, 2021

Если я правильно понял, то имеется ввиду срабатывания события при нажатии на кнопку "Enter" на клавиатуру. В результате чего должна выполнятся ф-я "checkGuess()". Если так, то вот пример:

klierik · May 14, 2021

12.05.2021 в 01:07, dislav сказал:

Активировать кнопку Enter не получается.

Я не вижу в коде кнопки "Enter". Что имеется ввиду?

12.05.2021 в 01:07, dislav сказал:

Ещё подскажите в какую строку вставить активацию.

О какой именно "активации" идёт речь?

dislav · May 14, 2021

klierik, её нужно добавить, что бы при нажатии срабатывал input.

<input type="submit" value="Отправить" class="guessSubmit">

dislav · May 14, 2021

klierik, всё работает. Спасибо большое.

Sign In

У меня не получается активировать кнопку Enter.

Question

dislav

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

dislav

Link to comment

Share on other sites

dislav

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information