Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

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

Марюха Сталкер Ученик (174), на голосовании 4 месяца назад
Написал скрипт по итогу которого при нажатии одной кнопки на странице, на другой будет изменяться счетчик количества товара в корзине, и также я добавил кнопку, этот счетчик обнуляющую. Но почему-то он не работает
Предоставляю кусочки кода и скрины:
<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>

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

Голосование за лучший ответ
Татьяна Просветленный (36384) 5 месяцев назад
В вашем скрипте есть несколько ошибок, которые мешают его корректной работе. Вот исправленный код:

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






Количество товара в корзине: 0

JavaScript:
 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.
Марюха СталкерУченик (174) 5 месяцев назад
Для кнопки "Добавить товар" нужен type="submit", чтобы данные с формы записывать в базу данных, неужели из-за этого типа не работает ?
Татьяна Просветленный (36384) Марюха Сталкер, конечно не будет работать
V̲i̲s̲t̲a̲s̲t̲e̲r̲ Искусственный Интеллект (264224) 5 месяцев назад
при нажатии одной кнопки на странице, на другой будет изменяться счетчик
с чего бы это..
Марюха СталкерУченик (174) 5 месяцев назад
не знаю друг вот такая идея в голову пришла
V̲i̲s̲t̲a̲s̲t̲e̲r̲ Искусственный Интеллект (264224) Марюха Сталкер, можно данные передавать через: url, сессию, куки, хранилища, серверные запросы
Похожие вопросы