Изменение кнопки при нажатии в html и javascript. (Изменение кнопки добавления в корзину на значок корзины при нажатии) - PullRequest
0 голосов
/ 01 августа 2020

У меня есть кнопка добавления в корзину в html. Я хочу изменить его значок тележки, если он будет нажат. Известные мне способы изменить только свойства стиля, но не всю кнопку. Вот мой код кнопки в html

<button data-product={{product.id}} data-action="add" class="btn btn-outline-info update-cart">Add to Cart</button>

Я пытался добавить img sr c при нажатии с помощью javascript onclick, но это не сработало. Пожалуйста, предложите мне способ изменить его на значок корзины, когда щелкнул. Кроме того, поскольку я работаю над веб-сайтом e-com на django, я хочу по умолчанию показывать значок корзины вместо добавления в корзину, если товар уже находится в корзине. Я думаю, что это можно сделать с помощью if else. Предложите эффективный способ для этого, если любое другое, кроме if else.

Любая помощь будет принята.

1 Ответ

0 голосов
/ 01 августа 2020

Я предлагаю вам использовать fontawesome. css библиотека

Причины

  1. Мы используем значки, добавляя классы
  2. Это не может повлиять на наш дизайн пользовательского интерфейса

function myFunction() {
   var element = document.getElementById("icon");
   element.classList.remove("fa-cart-arrow-down");
   element.classList.add("fa-check");
}
body{
height:100vh;
width:100%;
display:flex;
justify-content:center;
align-items:center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
</head>
<body>
<button class="btn btn-outline-info update-cart" onclick="myFunction()">Add to Cart <i class="fa fa-cart-arrow-down" aria-hidden="true" id="icon"></i>
</button>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...