Как сделать, чтобы код работал для класса, вместо ID?

Question

[stup_klev]

Как сделать, чтобы код работал для класса, вместо #content?

Answer 1

[Шохрух Шаймардонов]

В чем проблема в querySelector указать класс и ему присвоить обработчик?

Comments

[stup_klev]

Так и делаю, но почему-то захватывает в моей ситуации только первые по структуре блоки с указанными классами

[Шохрух Шаймардонов]

stup_klev, а может вам нужно document.querySelectorAll('.classname')
А потом уже циклом пробежаться по каждому элементу класса и присвоить им обработчик?
Не думали?

[stup_klev]

Шохрух Шаймардонов, когда так делаю, выдает

Uncaught TypeError: tabs.scrollIntoView is not a function
    at HTMLButtonElement.handler

[Шохрух Шаймардонов]

stup_klev, покажите как именно вы делаете

[stup_klev]

Шохрух Шаймардонов,

jQuery(document).ready(function($) {
(() => {
  const tabs = document.querySelectorAll('.short-repair-descpar');

  const handler = () => {
    tabs.scrollIntoView({ block: 'start', behavior: 'smooth' });
  };

  for (let cbox of document.querySelectorAll('.callmeform')) {
    cbox.addEventListener('click', handler);
  }
})();
});

[stup_klev]

Шохрух Шаймардонов, если это может помочь, то вот ссылка на сайт, где у меня используется данная структура apple-service.srv160751.hoster-test.ru/.
Проблема в разделе на главной "Калькулятор" на третьем пункте

[Шохрух Шаймардонов]

stup_klev, Так tabs это массив, а вы обращаетесь ко всему массиву, а не его элементу. Прогоните по циклу сам массив табс. Можете так:

const handler = () => {
    [...tabs].map(tab => tab.scrollIntoView({ block: 'start', behavior: 'smooth' }));
  };

[stup_klev]

Шохрух Шаймардонов, заменил,теперь из этого

jQuery(document).ready(function($) {
(() => {
  const tabs = document.querySelectorAll('.short-repair-descpar');

  const handler = () => {
    tabs.map(tab => tab.scrollIntoView({ block: 'start', behavior: 'smooth' }));
  };

  for (let cbox of document.querySelectorAll('.callmeform')) {
    cbox.addEventListener('click', handler);
  }
})();
});

получаю следующее:

custom.js:214 Uncaught TypeError: tabs.map is not a function
    at HTMLButtonElement.handler

[stup_klev]

Шохрух Шаймардонов, необходимо задать константу для map (извините за некомпетентность, только учусь JS)?

[Шохрух Шаймардонов]

stup_klev, изменил. Попробуйте

[Шохрух Шаймардонов]

stup_klev, нет нужды. Вы не возвращаете значение, просто модифицируете элемент. Это лаконичный вариант цикла фоо

[stup_klev]

Шохрух Шаймардонов, от души!!

[Шохрух Шаймардонов]

stup_klev, Душевно в душу)))

Answer 2

[Ibishka]

<div class="content" id="content">Ку-ку</div>
const tabs = document.querySelector('.content');

Comments

[stup_klev]

Так и делаю, но почему-то захватывает в моей ситуации только первые по структуре блоки с указанными классами

[Ibishka]

stup_klev, querySelectorAll пишите вместо querySelector

[stup_klev]

Ibishka, когда так делаю, выдает

Uncaught TypeError: tabs.scrollIntoView is not a function
    at HTMLButtonElement.handler