Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Добавление курса доллара и расчет в калькуляторе (https://javascript.ru/forum/misc/80691-dobavlenie-kursa-dollara-i-raschet-v-kalkulyatore.html)

Artemyi 15.07.2020 16:22

Добавление курса доллара и расчет в калькуляторе
 
Подскажите пожалуйста новичку.
Есть такой простой калькулятор https://jsfiddle.net/rq1jtb7c/2/
1. как избавиться от "NaN" в результатах расчета калькулятора, который появляется, когда начинаешь вводить какие-нибудь параметры?
2. стоимость переменной "baget" дана в долларах. Как в этот калькулятор добавить текущий курс доллара?

Пытался использовать этот сайт https://www.cbr-xml-daily.ru/, но знаний не хватает, чтобы все правильно интегрировать

Nexus 15.07.2020 16:46

Цитата:

Сообщение от Artemyi
1. как избавиться от "NaN" в результатах расчета калькулятора, который появляется, когда начинаешь вводить какие-нибудь параметры?

Проставить значения по умолчанию для полей, которые могут быть не заполнены.

Цитата:

Сообщение от Artemyi
2. стоимость переменной "baget" дана в долларах. Как в этот калькулятор добавить текущий курс доллара?

Примерно так: https://jsfiddle.net/NexusDeveloper/8k6vwc59/5/

laimas 15.07.2020 17:42

Artemyi, можно и нужно, исключить многочисленные if...else, если поступить одним из способов:
а) держать значения вариантов в data атрибутах опций, извлекая выбранное у выбранной опции
б) держать значения вариантов в массиве/объекте, извлекая выбранное по индексу/значению выбранной опции

Artemyi 16.07.2020 09:35

Цитата:

Сообщение от laimas (Сообщение 527042)
Artemyi, можно и нужно, исключить многочисленные if...else, если поступить одним из способов:
а) держать значения вариантов в data атрибутах опций, извлекая выбранное у выбранной опции
б) держать значения вариантов в массиве/объекте, извлекая выбранное по индексу/значению выбранной опции

а) я предполагаю вы про атрибуты value в input. Так можно было бы, но в в них указываются выбранные варианты (например, доставка - да/нет), которая отправляется на почту.
б) не добрался до этого, да и раз работает - не трогаю)

Artemyi 16.07.2020 09:36

Цитата:

Сообщение от Nexus (Сообщение 527039)
Проставить значения по умолчанию для полей, которые могут быть не заполнены.


Примерно так: https://jsfiddle.net/NexusDeveloper/8k6vwc59/5/

Расчет в долларах работает как нужно. Большое спасибо :dance:

laimas 16.07.2020 09:43

Цитата:

Сообщение от Artemyi
я предполагаю вы про атрибуты value в input

Конечно же нет, я о списках, и вместо того чтобы плодить такие портянки в коде:

if (form.baget[0].selected) {
baget=0;  // стоимость вариантов = цена*курс доллара
}                                  
else if (form.baget[1].selected) {
baget=100;
}
else if (form.baget[2].selected) {
baget=110;
}
else if (form.baget[3].selected) {
baget=120;
}
else if (form.baget[4].selected) {
baget=130;
}
....


прописать значения для baget в соответствующие опции, то есть

<option data-baget="100" value="1">100<option>
<option data-baget="110" value="2">110<option>
и т.д.


Пример:
<select id="baget">
    <option data-baget="1" value="">Не выбран</option>
    <option data-baget="100" value="1">№1</option>
    <option data-baget="110" value="2">№2</option>
    <option data-baget="120" value="3">№3</option>
    <option data-baget="130" value="4">№4</option>
    <option data-baget="140" value="5">№5</option>
    <option data-baget="150" value="6">№6</option>										
</select>
<input id="val" />
<script>
document.getElementById('baget').addEventListener('change', function() {
    let baget = this.options[this.selectedIndex].dataset.baget;
    val.value = baget;
})
</script>


либо использовать массив/объект описывающий эти значения.

Artemyi 17.07.2020 15:42

Цитата:

Сообщение от laimas (Сообщение 527055)
Конечно же нет, я о списках, и вместо того чтобы плодить такие портянки в коде:

if (form.baget[0].selected) {
baget=0;  // стоимость вариантов = цена*курс доллара
}                                  
else if (form.baget[1].selected) {
baget=100;
}
else if (form.baget[2].selected) {
baget=110;
}
else if (form.baget[3].selected) {
baget=120;
}
else if (form.baget[4].selected) {
baget=130;
}
....


прописать значения для baget в соответствующие опции, то есть

<option data-baget="100" value="1">100<option>
<option data-baget="110" value="2">110<option>
и т.д.


Пример:
<select id="baget">
    <option data-baget="1" value="">Не выбран</option>
    <option data-baget="100" value="1">№1</option>
    <option data-baget="110" value="2">№2</option>
    <option data-baget="120" value="3">№3</option>
    <option data-baget="130" value="4">№4</option>
    <option data-baget="140" value="5">№5</option>
    <option data-baget="150" value="6">№6</option>										
</select>
<input id="val" />
<script>
document.getElementById('baget').addEventListener('change', function() {
    let baget = this.options[this.selectedIndex].dataset.baget;
    val.value = baget;
})
</script>


либо использовать массив/объект описывающий эти значения.

Был бы премного благодарен, если вам не сложно, более подробно показать, как это мне прописать в моем калькуляторе?

laimas 17.07.2020 16:21

Цитата:

Сообщение от Artemyi
если вам не сложно, более подробно показать, как это мне прописать в моем калькуляторе

Можно было бы и конкретно по калькулятору, но мы уже неделю страдаем от изнывающей жары, и даже лишний раз языком и то пошевелить лень. :) Поэтому просто пояснение, вникните и сделайте согласно ему. Это несложно для понимания.

В примере видно, что значения для расчета прописываются в data атрибутах, в данном случае это в атрибутах опций - data-baget. У первой опции значение я прописал равным 1. Например, если в списке этом выбрана эта опция (то есть не было выбора варианта), а это значение списка будет операндом в операции умножения, то значение 1 не повлияет на результат. Вы можете другое значение подставить, например 0, если будет сложение, либо вообще не добавлять такого атрибута этой опции, если операция производится только при выборе варианта.

А далее, в функции расчета вы же получаете ссылку на список, а далее получить значение baget у выбранной опции, например:

//это список вариантов
var opt = document.getElementById('baget');
//а это значение baget выбранной его опции полученной из ее атрибута data-baget
var baget = opt.options[opt.selectedIndex].dataset.baget;
//далее это полученное значение подставляется в расчет


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

Думайте, пробуйте, а не получится тогда ..., но сегодня я точно не буду ходить по сайтам, что-то там смотреть и т.д.

Artemyi 20.07.2020 15:28

Цитата:

Сообщение от laimas (Сообщение 527107)
Можно было бы и конкретно по калькулятору, но мы уже неделю страдаем от изнывающей жары, и даже лишний раз языком и то пошевелить лень. :) Поэтому просто пояснение, вникните и сделайте согласно ему. Это несложно для понимания.

В примере видно, что значения для расчета прописываются в data атрибутах, в данном случае это в атрибутах опций - data-baget. У первой опции значение я прописал равным 1. Например, если в списке этом выбрана эта опция (то есть не было выбора варианта), а это значение списка будет операндом в операции умножения, то значение 1 не повлияет на результат. Вы можете другое значение подставить, например 0, если будет сложение, либо вообще не добавлять такого атрибута этой опции, если операция производится только при выборе варианта.

А далее, в функции расчета вы же получаете ссылку на список, а далее получить значение baget у выбранной опции, например:

//это список вариантов
var opt = document.getElementById('baget');
//а это значение baget выбранной его опции полученной из ее атрибута data-baget
var baget = opt.options[opt.selectedIndex].dataset.baget;
//далее это полученное значение подставляется в расчет


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

Думайте, пробуйте, а не получится тогда ..., но сегодня я точно не буду ходить по сайтам, что-то там смотреть и т.д.

Вроде допилил, все работает.
Большое спасибо :thanks:


Часовой пояс GMT +3, время: 15:05.