Janejane,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.row .add .price {
color: #CC0000;
font-weight: bold;
}
.column button:after{
content: "Add to Cart"
}
.column.add button:after{
content: "Delete from Card"
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const on = (parent, event, selector, handler) => parent.addEventListener(event, ({
target
}) => {
if (target = target.closest(selector)) handler(target)
})
const fn = el => {
el.parentNode.classList.toggle("add");
const sum = -[...document.querySelectorAll(".row .add .price")]
.reduce((accumulator, { textContent }) => accumulator - textContent, 0);
document.querySelector("#mycard").textContent = sum ? sum : "My Card Price";
};
on(document, "click", ".column button", fn);
});
</script>
</head>
<body>
<h2>Gitara shop</h2>
<h3 id="mycard">My Card Price</h3>
<div class="row">
<div class="column">
<h4 id="Name1">Gitara 1</h4>
<p class="price" id="price1">120</p>
<button></button>
</div>
<div class="column">
<h4 id="Name2">Gitara 2</h4>
<p class="price" id="price2">135</p>
<button></button>
</div>
<div class="column">
<h4 id="Name3">Gitara 3</h4>
<p class="price" id="price3">290</p>
<button></button>
</div>
</div>
</body>
</html>