Здравствуйте. Делаю симулятор оперативных переключений для своих ребят. Есть часть кода, но не получается сделать функцию которая будет проверять последовательность нажатий 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 и элемента & пробовал, но я так понимаю "не в ту степь".