Форум

sssema96 · #1 (**permalink**) 12.01.2021, 21:19

Здравствуйте. Делаю симулятор оперативных переключений для своих ребят. Есть часть кода, но не получается сделать функцию которая будет проверять последовательность нажатий button. То есть для выполнения задания нужно нажать именно последовательно кнопки с присвоиными id: clickRed, clickGreen_1 и clickRed_1.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="css/my.css">
  <script src="Click button.js"></script>   <!--Подключил файл Java Script-->
    <title>One test</title>   <!--название страницы-->
  <style>
    .green_button {
      background-image: url("img/Green Button.png"); /*цвет фона красной кнопки*/
      width: 53px; /*размер кнопки по ширине*/
      height: 59px; /*размер кнопки по высоте*/
    }
    .red_button{
      background-image: url("img/Red Button.png"); /* цвет фона зеленой кнопки */
      width: 53px; /*размер кнопки по ширине*/
      height: 59px; /*размер кнопки по высоте*/
    }
  </style>
</head>
<body>
<button class="show-image" data-img="/media/img/block_1_img.png" type="button" id="clickRed"></button>
<button class="show-image" data-img="/media/img/block_2_img.png" type="button" id="clickGreen"></button>
<button class="show-image" data-img="/media/img/block_1_img.png" type="button" id="clickRed_1"></button>
<button class="show-image" data-img="/media/img/block_2_img.png" type="button" id="clickGreen_1"></button>
<div id="open_img"></div>
<h1 align="center" style="color: #000000">Тест №1</h1> <!--написал текст на странице с помощью h1-->
<img src="img/T-1.jpg" alt="T-1" width="500" class="T-1"> <!--Вывел изображение на страницу-->
</body>
</html>

Далее на js сделал под свои нужды смену изображений при нажатии на кнопки id и value .

window.onload = function(){
    let buttons = document.querySelectorAll('.show-image');
 
    buttons.forEach(function (btn) {
        btn.addEventListener('click', function () {
            let id = this.getAttribute('id');
            let val = this.getAttribute('value');// получаем value
            if (id === 'clickRed' & id === 'clickRed_1') {
            
            }

            document.getElementById('open_img').innerHTML = '';
 
            let link = this.getAttribute('data-img');
            let img = document.createElement('img');
 
            img.src = link;
 
            document.getElementById('open_img').append(img);
        });
    });
}

с помощью if и элемента & пробовал, но я так понимаю "не в ту степь".

Nexus · #2 (**permalink**) 12.01.2021, 21:44

Сообщение от sssema96

Есть часть кода, но не получается сделать функцию которая будет проверять последовательность нажатий button.

Вроде задача: проверить последовательность нажатий, однако где вы хоть что-то похожее проверяете - не вижу.

В Вашем js-коде в строке 8 в выражении явно имеется ошибка.
Вы вместо логического оператора И (&&) используете побитовый оператор И (&).
https://developer.mozilla.org/ru/doc..._and_Operators

Для решения задачи вам достаточно записывать в массив уже нажатые клавиши и при определенном событии (у вас это момент, когда в массиве нажатых клавиш будет 3 элемента) сравнивать нажатые клавиши с верной их комбинацией.

Nexus · #3 (**permalink**) 12.01.2021, 21:58

<button id="button-1">#1</button>
<button id="button-2">#2</button>
<button id="button-3">#3</button>
<div id="result"></div>

<script>
document.addEventListener('DOMContentLoaded', () => {
  let userAnswers = [];
  const rightAnswers = ['button-2', 'button-3', 'button-1'];
  const resultContainer = document.querySelector('#result');

  document.querySelectorAll('button').forEach(button => {
    button.addEventListener('click', () => {
      resultContainer.style.border = 'none';
      resultContainer.textContent = '';

      userAnswers.push(button.id);

      if (userAnswers.length >= rightAnswers.length) {
        const isRightCombination = JSON.stringify(userAnswers) === JSON.stringify(rightAnswers);

        resultContainer.style.border = '1px solid ' + (isRightCombination ? 'green' : 'red');
        resultContainer.textContent = isRightCombination ? 'Right' : 'Wrong';

        userAnswers = [];
      }
    });
  });
});
</script>

sssema96 · #4 (**permalink**) 13.01.2021, 14:57

Спасибо большое очень сильно помогли.
А как сделать тоже самое только результат что бы выводился в alert, а не

resultContainer.style.border = '1px solid ' + (isRightCombination ? 'green' : 'red');

?

Nexus · #5 (**permalink**) 13.01.2021, 17:28

Сообщение от sssema96

А как сделать тоже самое только результат что бы выводился в alert, а не

Заменить строку на alert не пробовали?

sssema96 · #6 (**permalink**) 15.01.2021, 12:21

Спасибо, получилось. Alert (isRightCombination ? 'green' : 'red')

sssema96 · #7 (**permalink**) 19.01.2021, 15:03

Nexus,
А подскажите ещё по вашему примеру. Можно ли как-то организовать этот скрипт так что бы была жесткая привязка к последовательности. Например если задана такая последовательность

const rightAnswers = ['button-2', 'button-3', 'button-1'];

но пользователь например нажал правильно 'button-2', а потом нажал 'button-1' вместо 'button-3' ну и что бы в случае любого такого не совпадения выскакивало сообщение Alert (isRightCombination ? 'Правильно' : 'Неправильно')

Nexus · #8 (**permalink**) 19.01.2021, 19:06

<button id="button-1">#1</button>
<button id="button-2">#2</button>
<button id="button-3">#3</button>
<div id="result"></div>

<script>
document.addEventListener('DOMContentLoaded', () => {
  let userAnswers = [];
  const rightAnswers = ['button-2', 'button-3', 'button-1'];
  const resultContainer = document.querySelector('#result');
 
  document.querySelectorAll('button').forEach(button => {
    button.addEventListener('click', () => {
      resultContainer.style.border = 'none';
      resultContainer.textContent = '';
 
      const index = userAnswers.push(button.id) - 1;
      const isRightAnswer = userAnswers[index] === rightAnswers[index];
      const isLastAnswer = userAnswers.length === rightAnswers.length;
      
      if (isLastAnswer || !isRightAnswer) {
      	resultContainer.style.border = '1px solid ' + (isRightAnswer ? 'green' : 'red');
        resultContainer.textContent = isRightAnswer ? 'Right' : 'Wrong';

        userAnswers = [];
      }
    });
  });
});

</script>

sssema96 · #9 (**permalink**) 22.01.2021, 15:02

Nexus,
Спасибо большое. А подскажите ещё, как сделать что при совпадении результата будет выполнятся переход по внешней ссылке, а при не совпадении страница обновится.

Nexus · #10 (**permalink**) 22.01.2021, 15:07

sssema96, переход по внешней ссылке:

window.open('https://google.com');

Обновление страницы:

location.href = location.href;

location.reload вызывает повторную отправку формы, поэтому этот метод я не использую вообще.

Форум

Справочник

Discord чат

Курсы javascript