JS Как автоматически делать просчет калькулятора при загрузкe страницы

Question

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

Необходимо чтобы при загрузке страницы сразу срабатывал функционал и показывал результат с значком валюты.

Вот мой код:

// CALCULATOR
const exchange = {}
 $.getJSON("https://www.cbr-xml-daily.ru/daily_json.js", function(data) { // Получаем курс валют
  exchange.USD = data.Valute.USD.Value; // Получаем Доллар
  exchange.EUR = data.Valute.EUR.Value; // Получаем Евро
  exchange.JPY = data.Valute.JPY.Value; // Получаем Йену
  exchange.RUB = 1; // Получаем рубль
})

let coefficient = null
let currencyLabel = null

const updateValues = () => {
  coefficient = $('select.but').find('option:selected').val()
  currencyLabel = $('select.but').find('option:selected').data('myval')
}

const converter = (value, currency) => Math.floor(value * 100 / exchange[currency]) / 100

  
$('select.but').on('change', function() {
  updateValues()
  changeCurrency($('.first'))
  changeCurrency($('.second'))
})


const changeCurrency = target => {
  const value = target.find('input').val()
  const convertedValue = converter(value, coefficient);
  target.find('.convert_result').text(convertedValue);
  target.find('.my_field4_span').text(currencyLabel); 
}// LOCALSTORTAGE
function SaveSelectValue(el) {
  localStorage.setItem(el.name, el.value);
}
function LoadSelectValue(el) {
  return localStorage.getItem(el.name);
}

let selectCheck = document.querySelector("[name='selectcheck']");
selectCheck.value = LoadSelectValue(selectCheck);

<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)">
    <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="first">
  <input type="number" class="val" value="1000" >
  <span class="convert_result">1000</span> <span class="my_field4_span"></span>
  <option class="cur2">RUB</option>
</div>

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

Так же код в редакторе: https://jsfiddle.net/synapse3/n6kva28q/

Для наглядности в списке USD - отметил как selected Заранее спасибо, за помощь

Answer 1

// CALCULATOR
const exchange = {}
 $.getJSON("https://www.cbr-xml-daily.ru/daily_json.js", function(data) { // Получаем курс валют
  exchange.USD = data.Valute.USD.Value; // Получаем Доллар
  exchange.EUR = data.Valute.EUR.Value; // Получаем Евро
  exchange.JPY = data.Valute.JPY.Value; // Получаем Йену
  exchange.RUB = 1; // Получаем рубль
})

let coefficient = null
let currencyLabel = null

const updateValues = () => {
  coefficient = $('select.but').find('option:selected').val()
  currencyLabel = $('select.but').find('option:selected').data('myval')
}

const converter = (value, currency) => Math.floor(value * 100 / exchange[currency]) / 100

const change_val = function() {
  updateValues()
  changeCurrency($('.first'))
  changeCurrency($('.second'))
}
  
$('select.but').on('change', change_val);
$(change_val);

const changeCurrency = target => {
  const value = target.find('input').val()
  const convertedValue = converter(value, coefficient);
  target.find('.convert_result').text(convertedValue);
  target.find('.my_field4_span').text(currencyLabel); 
}// LOCALSTORTAGE
function SaveSelectValue(el) {
  localStorage.setItem(el.name, el.value);
}
function LoadSelectValue(el) {
  return localStorage.getItem(el.name);
}

let selectCheck = document.querySelector("[name='selectcheck']");
selectCheck.value = LoadSelectValue(selectCheck);

<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)">
    <option name="type" value="RUB" data-myval="₽" selected>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="first">
  <input type="number" class="val" value="1000" >
  <span class="convert_result">1000</span> <span class="my_field4_span"></span>
  <option class="cur2">RUB</option>
</div>

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

БЛОГ НА HUSL

JS Как автоматически делать просчет калькулятора при загрузкe страницы

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