Как взаимодействовать со всеми классами?

Question

[Tupic123]

Нужно получить все кнопки из блока. По клике на одну из них кнопка должна получать класс 'focused', если будет выбрана другая кнопка то класс должен переключаться на нее. Код работает только с getElementsById

HTML

<button value="Одностраничный сайт" id="brief-input"  class="contacts__info brief-input">Одностраничный сайт</button>
         <button value="Корпоративный сайт" class="contacts__info brief-input">Корпоративный сайт</button>
         <button value="Интернет магазин"class="contacts__info brief-input">Интернет магазин</button>
         <button value="Я не знаю" class="contacts__info brief-input">Я не знаю</button>

Код js

var brief = document.getElementsByClassName('brief-input')

brief.onclick = function () {
   brief.classList.add('focused')
}

Comments

[WbICHA]

https://developer.mozilla.org/ru/docs/Web/JavaScri...

Answer 1

[Арсений Матыцин]

Удобней всего будет воспользоваться querySelectorAll(), который создаст коллекцию элементов. Которую уже надо проитерировать и повесить слушатели клика. Ну или просто итерируй ту коллекцию, что собираешь сейчас.

Comments

[Tim]

Арсений Матыцин , getElementsByClassName ее типо нельзя проитерировать ?

[Арсений Матыцин]

Tim, читать внимательно и до конца ответы это не модно чтоль?

Answer 2

[Tim]

Answer 3

[OCTAGRAM]

Не getElementsById, а getElementById в единственном числе! А getElementsByClassName возвращает не один элемент, а массивоподобный объект. Насколько я могу судить, массивоподобности не хватает, чтоб у него был родной метод forEach, но можно позвать forEach из настоящего Array:

Array.prototype.forEach.call
  (document.getElementsByTagName("link"),
   function (element) { console.log(element.href); });