Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.01.2021, 20:19
Интересующийся
Отправить личное сообщение для sssema96 Посмотреть профиль Найти все сообщения от sssema96
 
Регистрация: 12.01.2021
Сообщений: 24

Задать последовательность нажатий button
Здравствуйте. Делаю симулятор оперативных переключений для своих ребят. Есть часть кода, но не получается сделать функцию которая будет проверять последовательность нажатий 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 и элемента & пробовал, но я так понимаю "не в ту степь".
Ответить с цитированием
  #2 (permalink)  
Старый 12.01.2021, 20:44
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,484

Сообщение от sssema96
Есть часть кода, но не получается сделать функцию которая будет проверять последовательность нажатий button.
Вроде задача: проверить последовательность нажатий, однако где вы хоть что-то похожее проверяете - не вижу.

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

Для решения задачи вам достаточно записывать в массив уже нажатые клавиши и при определенном событии (у вас это момент, когда в массиве нажатых клавиш будет 3 элемента) сравнивать нажатые клавиши с верной их комбинацией.
Ответить с цитированием
  #3 (permalink)  
Старый 12.01.2021, 20:58
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,484

<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>
Ответить с цитированием
  #4 (permalink)  
Старый 13.01.2021, 13:57
Интересующийся
Отправить личное сообщение для sssema96 Посмотреть профиль Найти все сообщения от sssema96
 
Регистрация: 12.01.2021
Сообщений: 24

Спасибо большое очень сильно помогли.
А как сделать тоже самое только результат что бы выводился в alert, а не
resultContainer.style.border = '1px solid ' + (isRightCombination ? 'green' : 'red');
?
Ответить с цитированием
  #5 (permalink)  
Старый 13.01.2021, 16:28
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,484

Сообщение от sssema96
А как сделать тоже самое только результат что бы выводился в alert, а не
Заменить строку на alert не пробовали?
Ответить с цитированием
  #6 (permalink)  
Старый 15.01.2021, 11:21
Интересующийся
Отправить личное сообщение для sssema96 Посмотреть профиль Найти все сообщения от sssema96
 
Регистрация: 12.01.2021
Сообщений: 24

Спасибо, получилось. Alert (isRightCombination ? 'green' : 'red')
Ответить с цитированием
  #7 (permalink)  
Старый 19.01.2021, 14:03
Интересующийся
Отправить личное сообщение для sssema96 Посмотреть профиль Найти все сообщения от sssema96
 
Регистрация: 12.01.2021
Сообщений: 24

Nexus,
А подскажите ещё по вашему примеру. Можно ли как-то организовать этот скрипт так что бы была жесткая привязка к последовательности. Например если задана такая последовательность
const rightAnswers = ['button-2', 'button-3', 'button-1'];
но пользователь например нажал правильно 'button-2', а потом нажал 'button-1' вместо 'button-3' ну и что бы в случае любого такого не совпадения выскакивало сообщение Alert (isRightCombination ? 'Правильно' : 'Неправильно')

Последний раз редактировалось sssema96, 19.01.2021 в 14:05.
Ответить с цитированием
  #8 (permalink)  
Старый 19.01.2021, 18:06
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,484

<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>
Ответить с цитированием
  #9 (permalink)  
Старый 22.01.2021, 14:02
Интересующийся
Отправить личное сообщение для sssema96 Посмотреть профиль Найти все сообщения от sssema96
 
Регистрация: 12.01.2021
Сообщений: 24

Nexus,
Спасибо большое. А подскажите ещё, как сделать что при совпадении результата будет выполнятся переход по внешней ссылке, а при не совпадении страница обновится.
Ответить с цитированием
  #10 (permalink)  
Старый 22.01.2021, 14:07
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,484

sssema96, переход по внешней ссылке:
window.open('https://google.com');


Обновление страницы:
location.href = location.href;


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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Валидация jquery c button type=button designerandrey jQuery 4 09.11.2018 14:21
Как сделать чтобы в текст button менялось значение в зависимости от количества выбран mopsusha Общие вопросы Javascript 10 19.03.2018 19:16
обработка щелчка по button. тонкие различия с input type=button xtfkpi Events/DOM/Window 2 28.01.2015 22:32
элемент внутри кнопки button FanAizu (X)HTML/CSS 2 15.07.2014 19:44
Проблема radio button с кроссбраузерностью shkarbatov Javascript под браузер 0 28.07.2011 09:55