Как правильно заменить функционал с document.getElementById на class?

Question

[Valery23]

Есть кнопка, при нажатии на которую меня должно редиректить на другую страницу:

<button type="submit" name="add-to-cart" value="<?php echo esc_attr($product->get_id()); ?>" class="single_add_to_cart_button button alt" id="buy_now_button">
<?php echo esc_html('Buy Now'); ?>
</button>
<input type="hidden" name="is_buy_now" id="is_buy_now" value="0" />

Вот сам скрипт, который работает через id, но таких кнопок на странице много, и так как это id, работает только самая первая, остальные не редиректят. Скажите пожалуйста, что нужно изменить в скрипте?

<script>
document.getElementById('buy_now_button').onclick = function() {
    setTimeout(function() {
        window.location = 'http://site.com/checkout';
    }, 500);
};
</script>

Comments

[Сергей Горностаев]

Какое отношение к вопросу имеет тег "функциональное программирование"?

[Модератор]

Valery23 дорогой пользователь, настоятельно рекомендуем еще раз обратить самое пристальное внимание на п. 3.1 регламента работы сервиса (и, в особенности, на его последний абзац). В противном случае, ваши вопросы будут удаляться по причине тег-спама, а систематические нарушения приведут к блокировке учетной записи.

Answer 1

[dollar]

Есть функция getElementsByClassName().

Поэтому так

<script>
var all = document.getElementsByClassName('main-menu__link');
for (let i=0; i<all.length; i++) {
	all[i].onclick = function() {
		setTimeout(function() {
			window.location = 'http://site.com/checkout';
		}, 500);
	}
};
</script>

Или так

<script>
[...document.getElementsByClassName('main-menu__link')].forEach(e=>e.onclick = function() {
	setTimeout(function() {
		window.location = 'http://site.com/checkout';
	}, 500);
});
</script>

Comments

[Valery23]

Большое спасибо!

Answer 2

[Alex]

const handler = function() {
    setTimeout(function() {
        window.location = 'http://site.com/checkout';
    }, 500);
}

document.querySelectorAll(".someClass").forEach(element => element.onclick = handler )

Comments

[Valery23]

Не сработало

Answer 3

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

buttons = document.getElementsByClassName('someClass');
for(let i = 0; i <buttons.length; i++)
{
  //Здесь будет функци по всем элементам класса
}

P.s. По совместимости и скорости быстрее чем querySelector ы