在 html 和 javascript 中单击时更改按钮。（单击时将添加到购物车按钮更改为购物车图标）

【问题标题】：Changing the button when clicked in html and javascript.(changing add to cart button to a cart icon when clicked)在 html 和 javascript 中单击时更改按钮。（单击时将添加到购物车按钮更改为购物车图标）
【发布时间】：2020-08-01 07:50:17
【问题描述】：

我在 html 中有一个添加到购物车按钮。如果单击它，我想将其更改为购物车图标。我知道的方式只能更改样式属性，但不能更改整个按钮。这是我在 html 中的按钮代码

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

我尝试在使用 javascript onclick 单击时添加 img src，但这不起作用。请建议我在单击时将其更改为购物车图标的方法。另外，当我在 django 上的电子商务网站上工作时，如果商品已经在购物车中，我想默认显示购物车图标而不是添加到购物车。我认为这可以使用 if else 来完成。为此建议一种有效的方式if else 以外的任何其他内容。

如有任何帮助，将不胜感激。

【问题讨论】：

标签： javascript html css jinja2

【解决方案1】：

我建议你使用 fontawesome.css 库

原因

我们通过添加类来使用图标
不会影响我们的 UI 设计

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>

【讨论】：