1

Здравствуйте. Почему не работает здесь this. Как мне применить к конкретному div (but [i]) новый класс. Необходимо чтоб при нажатии клавиши клавиатуры (например 1, которая также имеет символ !) клавиша меняла цвет (для этого добавляется новый класс). Каждый div это отдельная клавиша клавиатуры

<label for="#inp">
<h2>Введите что нибудь:&nbsp; </h2>
</label><input type="text" id="inp"></div>
<div class='digit'>
<div class="div-1 buttoN"> 1 </div>
<div class="div-2 buttoN"> 2 </div>
<div class="div-3 buttoN"> 3 </div>
<div class="div-4 buttoN"> 4 </div>
<div class="div-5 buttoN"> 5 </div>


 let inp = document.querySelector("#inp"); // Получаю значения из input 
 let but = document.querySelectorAll('.buttoN'); // Получаю множество блоков div  
 inp.onkeydown = function (event) {  
    for (var i = 0; i < but.length; i++) {  
        but[i].textContent == event.code;  
        if (event.code == 'Digit1') {  
            **this.but[i].classList.toggle('colY');**  
            inp.onkeyup = function () {  
                if (event.code == 'Digit1') {  
                    this.but[i].classList.toggle('colY');  
                };  
            }  
            if (event.code == 'Digit2') {  
                this.but[i].classList.toggle('colY');  
                inp.onkeyup = function () {  
                    if (event.code == 'Digit1') {  
                        this.but[i].classList.toggle('colY');  
                    };  
                }  
            }  
        }  
    }
10
  • добавте разметку и обьясните какой должен бить итоговий результат ? потомучто сейчас ви добавляете кучу хендлеров на кейап инпута и ето странно 20 дек 2019 в 12:39
  • а почему вы решили, что у this есть поле but, если вы сами создали эту переменную.
    – ThisMan
    20 дек 2019 в 12:49
  • почему в одной строчке вы используете but[i].textContent без this и вас это не смущает ( а тут доступ к конкретному элементу )
    – ThisMan
    20 дек 2019 в 12:50
  • this.but[i].classList.toggle('colY'); а тут уже обращаетесь через this, можно узнать, как вы рассуждали в этот момент?
    – ThisMan
    20 дек 2019 в 12:50
  • onkeyup тоже должен быть с this. Это я недосмотрел.
    – AleksandrM
    20 дек 2019 в 13:11

1 ответ 1

2

let inp = document.querySelector("#inp");
let digit = document.querySelector(".digit");

inp.onkeydown = function(event) {
  console.log(event.key);
  var b = digit.querySelector(".div-" + event.key);
  if (b)
    b.classList.toggle("colY");
};
.colY {
  color: red;
}
<label for="#inp">
<h2>Введите что-нибудь:&nbsp; </h2>
</label>
<input type="text" id="inp"></div>
<div class='digit'>
  <div class="div-1 buttoN"> 1 </div>
  <div class="div-2 buttoN"> 2 </div>
  <div class="div-3 buttoN"> 3 </div>
  <div class="div-4 buttoN"> 4 </div>
  <div class="div-5 buttoN"> 5 </div>
</div>

1
  • Спасибо огромное Igor. Все работает.
    – AleksandrM
    20 дек 2019 в 14:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.