Всё намного легче чем вы думаете.
Вот пример кода, надеюсь помог вам.
Быстро объясню, `btns` будет сохранять в себя все найденные элементы с классом `btn-add-cart`, с помощью фора мы добавляем события onclick для каждого элемента. При нажатия на кнопку с классом `btn-add-cart` у нас добавляется класс `active` для даного элемента если его нет, а если он есть то удаляет его.
const btns = document.querySelectorAll(".btn-add-card");
for(var i = 0; i < btns.length; i++){
btns[i].addEventListener("click", function(){
this.classList.toggle("active");
})
}
.btn{
padding: 12px 16px;
border: 2px solid black;
cursor: pointer;
transition: .5s;
}
.btn:hover{
color: white;
background-color: black;
}
.active{
border-color: red;
color: red;
background-color: black;
}
<button class="btn btn-add-card">Добавить в корзину</button>
<button class="btn btn-add-card">Добавить в корзину</button>
<button class="btn btn-add-card">Добавить в корзину</button>
Вот что у меня получилось, не знаю почему но тут этот код не будет работать так что лучше запустить в своём редакторе.
const btns = document.querySelectorAll(".btn-add-card");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
this.classList.toggle("active");
if (window.localStorage.getItem(this.id) === null) {
window.localStorage.setItem(this.id, "active");
} else {
window.localStorage.removeItem(this.id);
}
})
}
var keys = Object.keys(localStorage);
for (var i = 0; i < keys.length; i++) {
document.getElementById(keys[i]).classList.toggle("active");
}
.btn {
padding: 12px 16px;
border: 2px solid black;
cursor: pointer;
transition: .5s;
}
.btn:hover {
color: white;
background-color: black;
}
.active {
border-color: red;
color: red;
background-color: black;
}
<button class="btn btn-add-card" id="btn-add-cart1">Добавить в корзину</button>
<button class="btn btn-add-card" id="btn-add-cart2">Добавить в корзину</button>
<button class="btn btn-add-card" id="btn-add-cart3">Добавить в корзину</button>