Форум

Janejane · #1 (**permalink**) 09.05.2021, 00:20

При нажатии на каждую из кнопок, вместо записи "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>

рони · #2 (**permalink**) 09.05.2021, 00:48

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>

Janejane · #3 (**permalink**) 09.05.2021, 09:24

рони,
Огромное спасибо, вы мне очень помогли и это очень оригинальное решение, даже сделана замена надписи на кнопке "Add to Cart" на "Delete from Card".
Код для меня в смысле самих операторов немного сложен, так как очень многое подзабыто, но разберусь.

Janejane · #4 (**permalink**) 09.05.2021, 22:28

Я добавила сравнение с балансом, который равен для данного примера 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);
        });

рони · #5 (**permalink**) 09.05.2021, 22:59

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>

Janejane · #6 (**permalink**) 10.05.2021, 09:11

Вы так пишете, что мне даже Javascript начал нравиться, в три строчки уместилось то, что мне хотелось.

const balance = 250;
const color = sum > balance ? "#FF0000" : sum ? "#008000" : "#000000";
document.querySelector("#mycard").style.setProperty("--color", color);

Огромное спасибо за оказанную помощь.

Форум

Справочник

Discord чат

Курсы javascript