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

Question

[nata32]

Есть кнопки:

<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, спасибо большое !