Мне нужно нажать по очереди на блоки 1 и 2 и 3 говорит правильно, но если нажать 3 или 2 скажет не правильно

Question

Мне нужно нажать по очереди на блоки 1 и 2 и 3 говорит правильно, но если нажать 3 или 2 скажет не правильно

Александр Михайлович Ученик (36), на голосовании 3 месяца назад

Помогите как это делается а то мне сложно делать и не понятно, если поможете буду благодарен

   .one { background-color: red; width: 100px; line-height: 100px; color: #FFFFFF; font-size: 26px; text-align: center; } 
  .two { background-color: green; width: 100px; line-height: 100px; color: #FFFFFF; font-size: 26px; text-align: center; } 
  .three { background-color: grey; width: 100px; line-height: 100px; color: #FFFFFF; font-size: 26px; text-align: center; }

Answer 1

Артур Кириллов Профи (656) 4 месяца назад

тяжело...

Андрей УстиновМастер (2150) 4 месяца назад

я джун. оцени мой код пожалуйста я ниже скинул к этому вопросу.

Павел Просветленный (25616) Андрей Устинов, норм код. Алгоритм у нас почти идентичен, за исключением нюансов. Перечислять "косяки" не буду. Просто сравни с моим вариантом.

Answer 2

Андрей Устинов Мастер (2150) 4 месяца назад

 const elements = document.querySelectorAll('.element') 
let array = [] 
let clickCount = 0 
const arrayTest = [...elements] 
elements.forEach(e => { 
  e.addEventListener('click', () => { 
    array.push(e) 
    clickCount++ 
 
    if (clickCount === 3) { 
      for (let i = 0; i < array.length; i++) { 
        if (array.every((e, i) => e.classList[0] === arrayTest[i].classList[0])) { 
          console.log('Правильно') 
          array = [] 
          clickCount = 0 
        } else { 
          console.log('Неправильно') 
          array = [] 
          clickCount = 0 
        } 
      } 
    } 
  }) 
})

Артур КирилловПрофи (656) 4 месяца назад

Так нормально, но логику можно реализовать проще. Так же желательно перебирать не нод лист (подобие массива) , а сам массив, путём const example = Array.from(qsa).

Артур Кириллов Профи (656) Артур Кириллов, да и по классам не желательно всегда искать элементы...

Артур КирилловПрофи (656) 4 месяца назад

Классы не для этого в общем то и созданы, чтобы выбирать элементы по ним. Классы могут быть общими для нескольких элементов, а создавать отдельный класс для поиска конкретного элемента тоже не правильно. NodeList представляет собой коллекцию DOM объектов, это не массив, как может показаться, он обладает не всеми функциями массива (как я помню, да и раньше когда я перебирался форычем по ноду в некоторых случаях вызывало ошибку). Это не обязательно соблюдать, но будет правильнее в любом случае)

Павел Просветленный (25616) Артур Кириллов, для чего же они созданы? Я понимаю что "вероятно" до того ка появился JS, их использовали только для стилей. Как тогда искать элементы, если не используя селекторы? Зачем мне лишний раз преобразовать nodelist в массив, если мне необходим только перебор элементов? (см. мой ответ) Никогда не было проблем с nodelist. И не слышал о каких либо случаев, которые могут вызвать ошибку.

Артур КирилловПрофи (656) 4 месяца назад

щас таким селектором никто не пользуется, пережиток прошлого) Про поиск по классу я уже написал.

Артур Кириллов Профи (656) да и тем более не все люди пишут сайт на классах. Я их использую только для общих стилей, а условная запись может быть такая:header > .container div ul:nth-of-type(2) button, header > .container div ul:nth-of-type(2) button svg { transition: color 0.4s, fill 0.125s; }

Answer 3

Вот мой пример:
HTML:

JavaScript:

 const squares = document.getElementsByClassName('square');
const sequence = [];
for(let square of squares){
    square.addEventListener('click', function() {
        sequence.push(this);
        if(sequence.length == squares.length){
            const rightOrder = sequence.every((el, idx) => el == squares[idx]);
            if(rightOrder) alert('Правильно!');
            else alert('Не правильно!');
            sequence.length = 0;
        }
    });
}