Вызов функции конвертера

Question

Хочу сделать конвертер валют с кнопками. Находил решение с select и option, но они не подходят мне.

Окно конвертера:

<div class="convert_block_item">
<input type="number" id="val" placeholder="Введите сумму"/>
<button id="cur1" onclick="summ()">USD</button>
<button id="cur1" onclick="summ()">EUR</button>
<button id="cur1" onclick="summ()">RUB</button>
</div>
<div class="convert_block_item">
<div class="convert_result">= 00,000</div>
<button id="cur2" onclick="summ()">USD</button>
<button id="cur2" onclick="summ()">EUR</button>
<button id="cur2" onclick="summ()">RUB</button>
</div>

Суть: пользователь вводит сумму в input, выбирает валюту cur1, после чего в convert_result появляется результат, соответствующий курсу выбранной валюты cur2.

JS:

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 c = {'USD':s1, 'EUR':s2, 'RUB':'1'};  

    let val = document.getElementById('val');  
    let currency1 = document.getElementById('cur1');  
    let currency2 = document.getElementById('cur2');  
    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;  
            } else {  
                result.innerHTML = Math.ceil((val.value*c[currency2.value])*100)/100;  
            }
        }
    }
    val.oninput = function () {  
        summ();
    };
    currency1.onchange = function () {  
        summ();
    };
    currency2.onchange = function () { 
        summ();
    }

    });
}

При вызове функции по нажатию на buttonвсплывает ошибка "Uncaught ReferenceError: summ is not defined". Если вместо кнопок использовать select, функция работает корректно и курс валют рассчитывается.

На данный момент значение input не конвертируется по курсам других валют. Прошу помощи с решением данной задачи

P.S. Jquery 3.4.1 уже установлен

Answer 1

let s1, s2, c;

window.onload = function () {
    $.getJSON("https://www.cbr-xml-daily.ru/daily_json.js", function(data) {  

        s1 = data.Valute.USD.Value;  
        s2 = data.Valute.EUR.Value;  
        c = {'USD':s1, 'EUR':s2, 'RUB':'1'};
        
        console.log(c)

    });
}
    let currency2 = $( ".cur2" );  
    let result = $('.convert_result');  
    function summ() {  
                let val = document.querySelector('#val').value;
        var before = '= ';
        var currency2 = $(this)
        
        if (currency2.text() == 'RUB') {
            output(val);
        } else {        
            output(+val / c[currency2.text()])
        }
        
        function output(num) {
            result.text(before + num);
        }
    }
    
    currency2.click(summ)

<div class="convert_block_item">
<input type="number" id="val" placeholder="Введите сумму"/>
</div>
<div class="convert_block_item">
<div class="convert_result">= 00,000</div>
<button class="cur2">USD</button>
<button class="cur2">EUR</button>
<button class="cur2">RUB</button>
</div>

БЛОГ НА HUSL

Вызов функции конвертера

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