Рассчитать новую цену с учётом скидки в зависимости от введённого промокода.

@Consul108 · Регистрация: 28.11.2023

Студворк — интернет-сервис помощи студентам

Всем день добрый!
Помогите пожалуйста с написанием небольшого скрипта
есть такой код

HTML5
1
2
<input id="input" type="text" maxlength="20" value="">
 <p class="summa">1200</p>

Мне нужно чтобы при вводе значения в поле с input.summa менялась в зависимости от введённого значения

NEWFRESH10 - Итоговая цена снижалась на 10%
NEWFRESH20 - Итоговая цена снижалась на 20%
NEWFRESH30 - Итоговая цена снижалась на 30%

А если промокод введён неверно - появлялось сообщение о том что он введен неверно.

@NTHing · 28.11.2023, 20:40

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<input
            id="input"
            type="text"
            maxlength="20"
            placeholder="Введите промокод"
        />
        <p class="summa">1200</p>
        <p id="message"></p>
        <script>
            document.getElementById("input").addEventListener("change", function () {
                summa = document.querySelector(".summa");
                inputValue = this.value.toUpperCase();
                message = document.getElementById("message");
                currentSum = +summa.textContent;
 
                if (
                    inputValue === "NEWFRESH10" ||
                    inputValue === "NEWFRESH20" ||
                    inputValue === "NEWFRESH30"
                ) {
                    discount = parseInt(inputValue.slice(-2));
                    discountedSum = currentSum - currentSum * (discount / 100);
                    message.textContent = `итоговая цена ${discountedSum}`;
                } else {
                    summa.textContent = "1200";
                    message.textContent = "Промокод введен неверно";
                }
            });
        </script>

@mr_dramm · 28.11.2023, 22:28

Сообщение от NTHing

inputValue === "NEWFRESH10" ||
inputValue === "NEWFRESH20" ||
inputValue === "NEWFRESH30"

фантазии на тему как это еще можно сделать

JavaScript
1
const dict = {"NEWFRESH10": 10, "NEWFRESH20": 20, "NEWFRESH30": 30}

это даст больше свободы в выборе промокода и сократит код

JavaScript
1
2
3
4
5
6
7
8
                if (dict[inputValue]) {
                    discount = dict[inputValue];
                    discountedSum = currentSum - currentSum * (discount / 100);
                    message.textContent = `итоговая цена ${discountedSum}`;
                } else {
                    summa.textContent = "1200";
                    message.textContent = "Промокод введен неверно";
                }

Еще можно вынести логику работы с промокодом и другими возможными изменениями в цене во внешнюю логику, например через паттерн визитор, а этой функции оставить функционал только вывода цены в нужно место документа.

@Consul108 · 29.11.2023, 10:28 **[ТС]**

Спасибо огромное!
Позвольте уточнить 2 момента
1) Как сделать так - чтобы цена со скидкой показывалась не отдельным сообщением, а менялась непосредственно в самой сумме - там где 1200
2) Как сделать чтобы Сумма менялась автоматически при вводе в инпут - без нажатия на Enter?

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<input
            id="input"
            type="text"
            maxlength="20"
            placeholder="Введите промокод"
        />
        <p class="summa">1200</p>
        <p id="message"></p>
        <script>
            document.getElementById("input").addEventListener("change", function () {
                summa = document.querySelector(".summa");
                inputValue = this.value.toUpperCase();
                message = document.getElementById("message");
                currentSum = +summa.textContent;
 
                if (
                    inputValue === "NEWFRESH10" ||
                    inputValue === "NEWFRESH20" ||
                    inputValue === "NEWFRESH30"
                ) {
                    discount = parseInt(inputValue.slice(-2));
                    discountedSum = currentSum - currentSum * (discount / 100);
                    message.textContent = `итоговая цена ${discountedSum}`;
                } else {
                    summa.textContent = "1200";
                    message.textContent = "Промокод введен неверно";
                }
            });
        </script>

Спасибо ещё раз!

krvsa · 29.11.2023, 10:49

Сообщение от Consul108

Как сделать чтобы Сумма менялась автоматически при вводе в инпут - без нажатия на Enter?

Тут бы нужно как-то понять что ввод промокода завершен...

У тебя есть такой критерий?

Добавлено через 4 минуты

Сообщение от Consul108

Как сделать так - чтобы цена со скидкой показывалась не отдельным сообщением, а менялась непосредственно в самой сумме - там где 1200

Наверное тебе пора уже начать читать букварь...

Шпаргалка по JS-методам для работы с DOM

@Consul108 · 29.11.2023, 10:53 **[ТС]**

Тут бы нужно как-то понять что ввод промокода завершен... - в задумке я хотел чтобы скрипт работал когда курсор боьше не в инпуте.

Наверное тебе пора уже начать читать букварь... - Букварь читаю активно! И даже уже нашёл как это сделать!

krvsa · 29.11.2023, 11:16

Сообщение от Consul108

Букварь читаю активно! И даже уже нашёл как это сделать!

Молодец...

Сообщение от Consul108

в задумке я хотел чтобы скрипт работал когда курсор боьше не в инпуте

Ну это так себе решение...

Но можешь попробовать. Есть такое событие - потеря фокуса blur. Оно подойдет к твоей задумке.
https://learn.javascript.ru/focus-blur

Новые блоги и статьи Все статьи Все блоги /
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .
Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .

@Consul108 0 / 0 / 0 Регистрация: 28.11.2023 Сообщений: 3
	29.11.2023, 10:53 [ТС]
	Тут бы нужно как-то понять что ввод промокода завершен... - в задумке я хотел чтобы скрипт работал когда курсор боьше не в инпуте. Наверное тебе пора уже начать читать букварь... - Букварь читаю активно! И даже уже нашёл как это сделать! 0

Рассчитать новую цену с учётом скидки в зависимости от введённого промокода.

Решение