JS конвертер цены в валюте для нескольких полей

Question

Код собран из нескольких кусков. Не могу реализоваться свое желание - это изменение цены в нескольких блоках одновременно.

То есть валюта по дефолту рубль, далее имеется 2 поля с разной ценой, при изменение валюты на пример евро, в двух или более блоков должна меняться цена в полях.

В моем случае меняется только в первом, почему так, не могу понять ?

P.S. Значок валюты меняется при выборе самой вылюты из select

Мой код :

    window.onload = function () {
        $.getJSON("https://www.cbr-xml-daily.ru/daily_json.js", function(data) { // Получаем курс валют
            let s1 = data.Valute.USD.Value; // Получаем Доллар
            let s2 = data.Valute.EUR.Value; // Получаем Евро
            let s3 = data.Valute.JPY.Value; // Получаем Йену
            let c = {'USD':s1, 'EUR':s2, 'JPY':s3, 'RUB':'1'}; // Устанавливаем курс валют

        let val = document.getElementsByClassName('val')[0]; // Получаем элемент ввода данных
        let currency1 = document.getElementsByClassName('cur1')[0]; // Получаем первый селект
        let currency2 = document.getElementsByClassName('cur2')[0]; // Получаем второй селект
        let result = document.getElementsByClassName('convert_result')[0]; // Получаем поле куда будем писать результат
        function summ() { // Делаем функцию
            let z = 0;
            if(currency1.value === currency2.value){ // Если оба значения в селектах равны
                result.innerText = val.value; // То просто вписываем данные из поля ввода
            } else {
                if(currency1.value != 'RUB'){ // Если не равны рублю, то
                    z = val.value/c[currency1.value]; // Переводим сумму в рубли
                    result.innerHTML = Math.ceil((z/c[currency2.value])*100)/100 // Делим на курс и округляем до сотых
                }
            }
        }
        currency1.onclick = function () { // При смене первого селекта вызываем функцию.
            summ();
        };
        summ();

        });
    }

$('select.but').on('change', function() {
  $('.my_field4_span').text($(this).find('option:selected').data('myval'));
}).change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="but cur1" name="selectcheck" onchange="SaveSelectValue(this)" style="margin-bottom:50px;">
  <option name="type" value="RUB" data-myval="₽">RUB</option>
  <option name="type" value="USD" data-myval="$">USD</option>
  <option name="type" value="EUR" data-myval="€">EUR</option>
  <option name="type" value="JPY" data-myval="¥">JPY</option>
</select>

<!-- BLOCK 1 -->
<div class="">BLOCK 1</div>
<input type="number" class="val" value="1000" >
<span class="convert_result">1000</span> <span class="my_field4_span"></span>
<option class="cur2">RUB</option>

<!-- BLOCK 2 -->
<div class="">BLOCK 2</div>
<input type="number" class="val" value="2000" >
<span class="convert_result">2000</span> <span class="my_field4_span"></span>
<option class="cur2">RUB</option>

Так же предоставляю код в редакторе: https://jsfiddle.net/synapse3/yp5hzt7r/12/

Answer 1

Так как у вас несколько полей, то нужно пройтись по ним циклом, а у вас только первый меняется let result = document.getElementsByClassName('convert_result')[0].

const fromValute = document.querySelector('.cur1')                  // Из какой валюты
const toValute = document.querySelector('.cur2')                        // В какую валюту

const inputs = document.querySelectorAll('.val')                        // Все элементы ввода 
const spans = document.querySelectorAll('.convert_result')  // Все элементы для вывода ответа

// Объект с необходимыми валютами
const valutes = {
    'USD': 0,
  'EUR': 0,
  'JPY': 0
}

// Функция добавления полученных значений валюты в объект
const setValutes = (data) => {
    for (const key in valutes) {
    valutes[key] = data[key].Value
  } 
  
  valutes['RUB'] = 1 // Так как рубль 1 к 1
  
  calculate() // Вызов функции расчета и отображения
}

const calculate = () => {
    // Проходим по все парам input + span
  // Берем значение из input, конвертируем его
  // в нужную нам валюту и записываем
  // в span, который соответсвует данному input
    for (let i = 0; i < spans.length; i++) {
    const fromValue = inputs[i].value

        // Если значения валют совпали, то присвоить значение из input
    if (fromValue === toValute.value) {
        spans[i].innerHTML = inputs[i].value
    } else {
        // Перевод валюты
      const translateTo = fromValue / valutes[fromValute.value]
      spans[i].innerHTML = Math.ceil((translateTo / valutes[toValute.value]) * 100) / 100
    }
  }
}

window.onload = function () {
    
  // Получение данных через нативный fetch вместо jQuery
  fetch('https://www.cbr-xml-daily.ru/daily_json.js')
  .then(data => data.json())
  .then(json => setValutes(json.Valute))
  
  // При изменении select, пересчитывать значения
  document.querySelector('.cur1').onchange = () => {
    calculate()
  }

}

$('select.but').on('change', function() {
  $('.my_field4_span').text($(this).find('option:selected').data('myval'));
}).change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="but cur1" name="selectcheck" style="margin-bottom:50px;">
  <option name="type" value="RUB" data-myval="₽">RUB</option>
  <option name="type" value="USD" data-myval="$" selected>USD</option>
  <option name="type" value="EUR" data-myval="€">EUR</option>
  <option name="type" value="JPY" data-myval="¥">JPY</option>
</select>

<!-- BLOCK 1 -->
<div class="">BLOCK 1</div>
<input type="number" class="val" value="1000" >
<span class="convert_result">1000</span> <span class="my_field4_span"></span>
<option class="cur2">RUB</option>

<!-- BLOCK 2 -->
<div class="">BLOCK 2</div>
<input type="number" class="val" value="2000" >
<span class="convert_result">2000</span> <span class="my_field4_span"></span>
<option class="cur2">RUB</option>

БЛОГ НА HUSL

JS конвертер цены в валюте для нескольких полей

Ответы (1 шт):