Получение и вывод на экран данных из атрибут?

Question

Есть такая задача. Пользователь видит на экране изображение и вопрос, что изображено на картинке? У пользователя должна быть возможность ввести только правильный ответ. Например, на картинке изображен лес. У пользователя, в данном случае, есть возможность ввести слово ЛЕС.После правильного ответа на экран выводится другое изображение и т.д. В моем варианте условие работает частично, т.е. пользователь имеет возможность ввода этих трех символов в любой последовательности. Перепробовал все в рамках своих знаний на данный момент. Не смог решить проблему. Требуется помощь. Спасибо.

 <div class="item  one" value="лес"></div>

let Word = document.querySelector(".pick");  //вывод на экран
 let content = document.querySelector(".item");
let attr =content. getAttribute("value");// атрибут 
let alfabet = document.querySelectorAll(".num");// клавиатура

alfabet.forEach((elem) => {
  elem.onclick = function () {
       if (attr.includes(elem.innerHTML)) {
         word.innerHTML += elem.innerHTML;
       }
     }
  });

Answer 1

let input = document.querySelector('input');
let output = document.querySelector('.output');
const word = 'лес';

input.addEventListener('input',function() {
   let index =  output.innerText.length;
   let letter = word.split('').splice(index,1);   
   if (this.value == letter) output.innerText += letter;
   this.value = '';
})

<input type="text">
<div class="output"></div>

БЛОГ НА HUSL

Получение и вывод на экран данных из атрибут?

Ответы (1 шт):