Как сделать так, чтобы данные передавались только после клика мышкой?

Question

Архип

интернет-магазины

Как сделать так, чтобы данные передавались только после клика мышкой?

Как можно сделать так, чтобы при клике на кнопку в корзине появлялась надпись только с тем товаром, который соответствует этой кнопке? Как можно реализовать подобное поведение средствами Javascript, чтобы избежать появления дубликатов при добавлении товаров в корзину?

27 апреля 2024 г. 15:30

Ответы на вопрос 1

Похожие вопросы

Answer 1

Для того чтобы данные передавались только после клика мышкой, можно использовать обработчик событий click. Например:

```html
<button id="btn">Нажми меня</button>
<div id="result"></div>

<script>
document.getElementById('btn').addEventListener('click', function() {
    document.getElementById('result').innerText = 'Данные, которые передаем после клика';
});
</script>
```

Чтобы реализовать отображение надписи только с тем товаром, который соответствует кнопке в корзине, можно использовать дополнительные атрибуты в HTML элементах и работать с ними в JavaScript. Например:

```html
<button class="add-to-cart" data-product="Товар 1">Добавить товар 1 в корзину</button>
<button class="add-to-cart" data-product="Товар 2">Добавить товар 2 в корзину</button>
<div id="cart"></div>

<script>
document.querySelectorAll('.add-to-cart').forEach(function(button) {
    button.addEventListener('click', function() {
        var productName = this.getAttribute('data-product');
        var cart = document.getElementById('cart');
        cart.innerText = `Товар ${productName} успешно добавлен в корзину`;
    });
});
</script>
```

Этот код будет отображать надпись с тем товаром, который соответствует кнопке, на которую кликнули. При этом при добавлении нового товара в корзину предыдущая надпись будет заменена на новую без дублирования.