Помогите решить задачу с перебором классов и добавлением нового

172

29 декабря 2021, 07:30

Есть множество div элементов с одинаковым классом.При переборе я должен найти тот div в блоке которого указано например буква 'h' и присвоить ему новый класс.

  <input type="text" id="inp">
  <div class="buttoN"> m</div>
  <div class="buttoN">p</div>
  <div class="buttoN">h</div>
  <div class="buttoN">i</div>
  <div class="buttoN">b</div>
.buthover{
  color: red;
}
let inp = document.querySelector("#inp");
let but = document.querySelectorAll('.buttoN');
inp.onkeydown = function () {
.................
    for (i = 0; i < but.length; i++) {
............................

    }
}

Ссылка https://codepen.io/fortune82/pen/xBMKKz?editors=1111

Answer 1

let inp = document.querySelector("#inp"); 
let but = document.querySelectorAll('.buttoN'); 
inp.onkeydown = function(e) { 
  for(var i = 0; i < but.length; i++) { 
    if (but[i].textContent == e.key) 
      but[i].classList.add("red"); 
  } 
}

.red { 
  color: red; 
}

<input type="text" id="inp"> 
<div class="buttoN">m</div> 
<div class="buttoN">p</div> 
<div class="buttoN">h</div> 
<div class="buttoN">i</div> 
<div class="buttoN">b</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Атрибут Vue.js в сгенерированном html

Мне нужно сделать обработчик события click для html элемента, который динамически генерируется с помощью vuejs(v-html)

221

javascript

Направление движения свайпа

Я начал делать меню, чтобы при свайпе влево, открывалось меню, а при свайпе вправо закрывалосьНо я не понимаю, как мне определять продолжительность...

192

javascript

Достать геоданные асинхронно

есть фрагмент кода, который возвращает геоданные пользователя(широта, долгота) в таком варианте:

280

javascript

Uncaught TypeError: Cannot read property 'checked' of undefined [закрыт]

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском

245