1г

Настройка js файла сайта

Написал скрипт по итогу которого при нажатии одной кнопки на странице, на другой будет изменяться счетчик количества товара в корзине, и также я добавил кнопку, этот счетчик обнуляющую. Но почему-то он не работает
Предоставляю кусочки кода и скрины:
<div><button class="button-24" id="button_clear_tovar" title="Нажмите, чтобы удалить все товары из корзины" role="button">Очистить</button></div>

<button type="submit" id="button_buy_tovar" class="button-77">Добавить товар</button>

<div class="back_count">Количество товара в корзине: <span id="count_tovara">0 </span> </div>

При нажатии кнопки "Добавить товар" страница просто обновляется( я знаю почему) и ничего не происходит.
Вот сам скрипт:

По дате

По Рейтингу

z9xsvoipgjphzyl

Искусственный Интеллект

1г

при нажатии одной кнопки на странице, на другой будет изменяться счетчик

с чего бы это..

tatiana_41026

Просветленный

1г

В вашем скрипте есть несколько ошибок, которые мешают его корректной работе. Вот исправленный код:

Добавьте атрибут type="button" для кнопок, чтобы они не вызывали отправку формы и обновление страницы.
Исправьте идентификаторы элементов в скрипте, чтобы они соответствовали идентификаторам в HTML.
Исправленный HTML и JavaScript:
HTML:

12345678

 <div> 
    <button type="button" class="button-24" id="button_clear_tovar" title="Нажмите, чтобы удалить все товары из корзины" role="button">Очистить</button> 
</div> 
 
<button type="button" id="button_buy_tovar" class="button-77">Добавить товар</button> 
 
<div class="back_count">Количество товара в корзине: <span id="count_tovara">0</span></div>

JavaScript:

1234567891011121314151617

 let counter = 0; 
 
const BtnBuy = document.getElementById('button_buy_tovar'); 
const counterElement = document.getElementById('count_tovara'); 
const BtnClear = document.getElementById('button_clear_tovar'); 
 
BtnBuy.addEventListener('click', () => { 
    ++counter; 
    counterElement.innerHTML = counter; 
    counterElement.textContent = counter; 
}); 
 
BtnClear.addEventListener('click', () => { 
    counter = 0; 
    counterElement.innerHTML = counter; 
    counterElement.textContent = counter; 
});

Важные моменты:

Убедитесь, что у кнопок стоит атрибут type="button", чтобы они не вызывали отправку формы.
В вашем HTML используйте идентификатор count_tovara для элемента, где отображается количество товаров. В вашем скрипте был использован button_buy_tovar для этого элемента, что было неверно.
Обратите внимание, что метод innerHTML и textContent не нужно использовать одновременно, достаточно одного из них. Обычно используют textContent.