Вход

Просмотр полной версии : Калькулятор цен на js


c4udok
08.08.2020, 19:48
:cray: Помогите пожалуйста!
есть скрипт калькулятора, цен на услуги
калькулятор считает цену взависимости от выбранной валюты. мне нужно добавить функцию которая будет перечитывать цены услуг с дополнительным значением.

вот то что у меня есть https://codepen.io/alexej-kachan/pen/oNxXgLx

рони
08.08.2020, 20:07
c4udok,
проблема то в чём?

c4udok
08.08.2020, 20:24
проблема не могу связать две функции
одна считает цену по курсу(например 1 урок стоит 50$ или 1350 рубл. 8 уроков 80$ и так далее), а вторая функция делает тоже самое но при выборе элемента input и берет значение из его data(тоесть формула такая цена*курс*data из импут )

рони
08.08.2020, 20:35
c4udok,
не осилил ваше описание, но может чем поможет такой вариант ...
заменить полностью на
document.addEventListener("DOMContentLoaded", function() {
let db = [{
ISO4217: '$',
multiply: 1
},
{
ISO4217: 'RUB',
multiply: 70.5
},
{
ISO4217: 'UAH',
multiply: 27
}
];
document.getElementById("valuta").addEventListener('change', function(e) {
let option = db[this.selectedIndex];
rebuildPrices(option);
});

function rebuildPrices({ISO4217, multiply}) {
[...document.querySelectorAll('[data-cost]')].forEach(el => {
const num = el.dataset.cost,
span = el.querySelector('span');
span.innerHTML = `${(num * multiply).toFixed(2)} ${ISO4217}`
})
}
rebuildPrices(db[0])
});

c4udok
08.08.2020, 20:39
<b>Выберите язык преподавания:</b><br>
<input type="radio" name="nameRadio" value="1" checked="checked"/>
<input type="radio" name="nameRadio" value="20"/>
<input type="radio" name="nameRadio" value="300"/>
<input type="radio" name="nameRadio" value="400"/>

вот тут. нужно что бы он также работал как и select, только добавлял в формулу значение value

c4udok
08.08.2020, 20:45
не могу разобраться уже 4 день, помогите пожалуйста

рони
08.08.2020, 20:49
при выборе элемента input
прогресс -- неизвестный инпут обрёл имя name="nameRadio"
только добавлял в формулу значение value
формулу напишите.

c4udok
08.08.2020, 20:53
при выборе
select валюты ('цена за один урок' * 'курс валюты' + 'добавить знак валюты')

input язык преподавателя(доп цена)- ('цена за один урок'* 'курс валюты(из select валюты)' * 'input.value(nameRadio)' + 'добавить знак валюты' )

рони
08.08.2020, 21:09
c4udok,
document.addEventListener("DOMContentLoaded", function() {
let db = [{
ISO4217: '$',
multiply: 1
},
{
ISO4217: 'RUB',
multiply: 70.5
},
{
ISO4217: 'UAH',
multiply: 27
}
];
document.addEventListener('change', function({target}) {
if(target.closest('#valuta, [name="nameRadio"]')) {
let option = db[document.querySelector('#valuta').selectedIndex];
rebuildPrices(option);
}

});

function rebuildPrices({ISO4217, multiply}) {
const val = document.querySelector('[name="nameRadio"]:checked').value || 1;
document.querySelector('#rezultatRadio').innerHTML = val;
[...document.querySelectorAll('[data-cost]')].forEach(el => {
const num = el.dataset.cost,
span = el.querySelector('span');
span.innerHTML = `${(num * multiply * val).toFixed(2)} ${ISO4217}`;
})
}
rebuildPrices(db[0])
});

c4udok
08.08.2020, 21:33
Блиииин СПАСИБО! СПАСИБО!!:dance: :dance: :dance:
Все работает!

Капец столько возился!
скажи а есть возможнотсь сделать округление до 0 для <h5 class="text-center pricepacketprice" data-cost='105.5'><span id="indificator">$105.5</span></h5>

я не хочу наглеть конечно

рони
08.08.2020, 21:35
сделать округление до 0
toFixed(2)
:-?

c4udok
08.08.2020, 21:36
точнее для class="pricepacketprice"

рони
08.08.2020, 21:41
c4udok,
:-?

рони
08.08.2020, 21:42
c4udok,
сложно понять что именно вам нужно.

c4udok
08.08.2020, 21:42
имею ввиду кратно 10. если 1495 то 1500. если 36 то 40 . если 22 то 20

рони
08.08.2020, 21:57
есть возможнотсь сделать округление до 0
function rebuildPrices({ISO4217, multiply}) {
const val = document.querySelector('[name="nameRadio"]:checked').value || 1;
document.querySelector('#rezultatRadio').innerHTML = val;
[...document.querySelectorAll('[data-cost]')].forEach(el => {
const num = el.dataset.cost,
span = el.querySelector('span'),
limit = el.classList.contains('pricepacketprice') ? 0 : 2;
span.innerHTML = `${(num * multiply * val).toFixed(limit)} ${ISO4217}`;
})
}
имею ввиду кратно 10.
function rebuildPrices({ISO4217, multiply}) {
const val = document.querySelector('[name="nameRadio"]:checked').value || 1;
document.querySelector('#rezultatRadio').innerHTML = val;
[...document.querySelectorAll('[data-cost]')].forEach(el => {
const num = el.dataset.cost,
span = el.querySelector('span'),
limit = el.classList.contains('pricepacketprice') ? Math.floor(num * multiply * val / 10 ) * 10 : (num * multiply * val).toFixed(2);
span.innerHTML = `${limit} ${ISO4217}`;
})
}

c4udok
08.08.2020, 22:03
Блин где ты учился? спасибо большое!
а для class="indificator" аналогичный код?
нужно оставить один знак после запитой?
сейчас сижу разбираю код по частям) хоть в рамку ставь!

рони
08.08.2020, 22:05
нужно оставить один знак после запитой?
1 вариант пост 16
limit = el.classList.contains('pricepacketprice') ? 0 : 1;

2 вариант пост 16
toFixed(1)

c4udok
08.08.2020, 22:09
1 вариант пост 16
limit = el.classList.contains('pricepacketprice') ? 0 : 1;

2 вариант пост 16
toFixed(1)

тоесть код будет:
limit = el.classList.contains('pricepacketprice') ? Math.floor(num * multiply * val / 10 ) * 10 : (num * multiply * val).toFixed(2);
limitе = el.classList.contains('indificator') ? Math.floor(num * multiply * val / 10 ) * 10 : (num * multiply * val).toFixed(2);

?

рони
08.08.2020, 22:12
тоесть код будет:
код будет прежним, ничего кроме одной цифры менять или добавлять не надо.
в строке 7 двойку поменять на единицу(для обоих вариантов).

c4udok
13.08.2020, 02:39
Как сделать так?
let url = ("#order:" + "<p class="uroktext text-center"> текст</p> (например 5 или 10 уроков)" + "активный таб <a class="nav-link active" data-toggle="tab" href="#vi" id="vii">Взрослый индивидуально</a>(например взрослый индивидуально или Ребенок индивидуально)" + "Язык преподователя текст активного радио(например Near Netive)" + "=" + "limit')


должно получить такая враза
<a class="prca" href="#order: 5 Уроков Взрослый индивидуально, язык преподователя Near Netive =1000"> <button class="pricepacket pricepacketbutton text-center pricepac">
Оставить заявку
</button> </a>

voraa
13.08.2020, 07:25
Очень странное сочетание
<a ...>
<button>
</button>
</a>

Кто при клике должен реагировать?
Или оба? Сначала действие по кнопке, потом переход?

Что из чего получиться должно, все равно непонятно.

c4udok
13.08.2020, 10:48
я просто кнопку обернул в ссылку. должная ссылка страбатывать

voraa
13.08.2020, 11:16
А зачем тогда кнопка?

c4udok
13.08.2020, 11:50
рони,
Хелп!

c4udok
13.08.2020, 12:32
voraa,
для эффекта кнопки, но это не важно для скрипта

laimas
13.08.2020, 14:05
для эффекта кнопки

Не занимайтесь глупостями, да и href="#order: 5 Уроков... тоже кошмар какой-то. Можно и ссылку оформить под кнопку, но если задача запустить сценарий на клиенте, то зачем тут ссылка?

рони
13.08.2020, 14:43
c4udok,
мне сложно вам помочь, может сначала вам немного повысить уровень подготовки, здесь есть учебник (https://learn.javascript.ru/).