Как заблокировать кнопку после нажатия на JS?

Question

[nata32]

Добрый день, есть 3 кнопки, с разными id и одинаковыми class,
код кнопок

<button id="btna" class="btn btn-primary btn-sm"><i class="fa fa-search"></i> Показать</button> 
<button id="btnd" class="btn btn-primary btn-sm"><i class="fa fa-search"></i> Показать</button>
<button id="btnsh" class="btn btn-primary btn-sm"><i class="fa fa-search"></i> Показать</button>

после нажатия нужно заблокировать нажатую кнопку и подменить надпись,
делаю так

document.querySelector('.btn').addEventListener('click', function () {  
console.log('click');
    this.disabled = true;
});
const buttonElem = document.querySelector('.btn');
      let onButtonClick = function() {
      buttonElem.textContent = 'Идет поиск. Ждите пожалуйста.'
  }
      buttonElem.addEventListener('click', onButtonClick);

при нажатие кнопки нечего не происходит, ошибок нет, в лог нечего не пишет, пробовала прописать
document.getelementbyclass
но дает ошибку, нашла, что это устаревшее, рекомендуют querySelector
В чем проблема ?
Спасибо.

Answer 1

[Сергей delphinpro]

document.querySelectorAll('.btn').forEach(btn => {
   btn.addEventListener('click', function () {  
      btn.disabled = true;
      btn.textContent = 'Идет поиск. Ждите пожалуйста.'
   });
});

Comments

[nata32]

Спасибо добрый человек, все работает ! Если можно, еще дополнение к этому вопросу, у кнопки иконка
Показать
если я прописываю в смене надписи и смену иконки,
Идет поиск. Ждите пожалуйста.
то при замене видно не иконку а просто код

пробовала вместо textContent писать innerText, не помогло, можно как то это реализовать ? Спасибо.

[Сергей delphinpro]

nata32,

btn.innerHTML = '<i class="fa fa-search"></i> Идет поиск. Ждите пожалуйста.'

[nata32]

Сергей delphinpro, спасибо большое !