Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.05.2021, 00:20
Новичок на форуме
Отправить личное сообщение для Janejane Посмотреть профиль Найти все сообщения от Janejane
 
Регистрация: 09.05.2021
Сообщений: 9

Вывод суммы в зависимости от выбранных продуктов
При нажатии на каждую из кнопок, вместо записи "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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

сумма выбранного товара
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>
Ответить с цитированием
  #3 (permalink)  
Старый 09.05.2021, 09:24
Новичок на форуме
Отправить личное сообщение для Janejane Посмотреть профиль Найти все сообщения от Janejane
 
Регистрация: 09.05.2021
Сообщений: 9

рони,
Огромное спасибо, вы мне очень помогли и это очень оригинальное решение, даже сделана замена надписи на кнопке "Add to Cart" на "Delete from Card".
Код для меня в смысле самих операторов немного сложен, так как очень многое подзабыто, но разберусь.
Ответить с цитированием
  #4 (permalink)  
Старый 09.05.2021, 22:28
Новичок на форуме
Отправить личное сообщение для Janejane Посмотреть профиль Найти все сообщения от Janejane
 
Регистрация: 09.05.2021
Сообщений: 9

Я добавила сравнение с балансом, который равен для данного примера 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

зависимость цвета от суммы
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>

Последний раз редактировалось рони, 09.05.2021 в 23:01.
Ответить с цитированием
  #6 (permalink)  
Старый 10.05.2021, 09:11
Новичок на форуме
Отправить личное сообщение для Janejane Посмотреть профиль Найти все сообщения от Janejane
 
Регистрация: 09.05.2021
Сообщений: 9

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

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


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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать вывод sabmit в зависимости от radio кнопки Andrey3443 Общие вопросы Javascript 1 25.11.2018 09:55
Вывод выбранных даных переключателей "radio" Vasya1976 Общие вопросы Javascript 4 20.09.2018 22:13
Вывод данных в зависимости от местоположения unlik9 Работа 2 06.04.2018 11:30
Вывод информации в зависимости от выбранных значений select Batyabest Events/DOM/Window 1 01.10.2014 05:20
Вывод выбранных данных и проверка checkbox MasterHrust Javascript под браузер 3 28.09.2011 17:44