Вывод суммы в зависимости от выбранных продуктов
При нажатии на каждую из кнопок, вместо записи "My Card Price" должна появиться сумма цен выбранных гитар. Как ее вывести туда с помощью Javascript?
Очень прошу помочь мне в этом вопросе.
<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 onclick="getPrice(1)">Add to Cart</button>
</div>
<div class="column">
<h4 id="Name2">Gitara 2</h4>
<p class="price" id="price2" >135</p>
<button onclick="getPrice(2)">Add to Cart</button>
</div>
<div class="column">
<h4 id="Name3">Gitara 3</h4>
<p class="price" id="price3" >290</p>
<button onclick="getPrice(3)">Add to Cart</button>
</div>
</div>
|
сумма выбранного товара
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>
|
рони,
Огромное спасибо, вы мне очень помогли и это очень оригинальное решение, даже сделана замена надписи на кнопке "Add to Cart" на "Delete from Card". Код для меня в смысле самих операторов немного сложен, так как очень многое подзабыто, но разберусь. |
Я добавила сравнение с балансом, который равен для данного примера 250 и, если сумма выбранного товара меньше либо равно 250, то эта сумма будет видна зеленым цветом, а если же она больше 250, то красного цвета.
Мне почему-то не удалось вставить возможность, что если ничего не выбрано и текст равен "My Card Price", то чтобы он был виден черным текстом.
balance=250;
if (sum <= balance) {
mycard = document.getElementById("mycard");
mycard.style.color = 'green';
} else if (sum > balance) {
mycard = document.getElementById("mycard");
mycard.style.color = 'red';
} else if (sum === "My Card Price") { ............................................ ??? здесь явно не то пишу, что надо и тем более, проверка не доходит до этого места
mycard = document.getElementById("mycard");
mycard.style.color = 'red';
}
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);
balance=250;
if (sum <= balance) {
mycard = document.getElementById("mycard");
mycard.style.color = 'green';
} else if (sum > balance) {
mycard = document.getElementById("mycard");
mycard.style.color = 'red';
}
document.querySelector("#mycard").textContent = sum ? sum : "My Card Price";
};
on(document, "click", ".column button", fn);
});
|
зависимость цвета от суммы
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"
}
#mycard{
color: var(--color, #000000);
}
</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";
const balance = 250;
const color = sum > balance ? "#FF0000" : sum ? "#008000" : "#000000";
document.querySelector("#mycard").style.setProperty("--color", color);
};
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>
|
Вы так пишете, что мне даже Javascript начал нравиться, в три строчки уместилось то, что мне хотелось.
const balance = 250;
const color = sum > balance ? "#FF0000" : sum ? "#008000" : "#000000";
document.querySelector("#mycard").style.setProperty("--color", color);
Огромное спасибо за оказанную помощь. |
| Часовой пояс GMT +3, время: 18:57. |