Почему выводится вместо нормального результата только нули при умножении функции?

Question

[FeDroid74]

Нужно сделать конвертер валюты, при этом строго по инструкции, без добавлений своего.

<div class="main">
        <h2>Введите сумму в рублях</h2>
        <div class="converter">
            <div class="input">
                <input class="value" type="number" id="value">
                <select class="currency-selector">
                    <option value="USD">USD</option>
                    <option value="EUR">EUR</option>
                </select>
            </div>
            <div class="output">
                <button onclick="сonvertCurrency()">Узнать</button>
                <h3 class="dollar" id="dollar"></h3>
            </div>
        </div>
    </div>

function сonvertCurrency() {

    fetch('https://v6.exchangerate-api.com/v6/353aabff81d47df9512e9535/latest/RUB')
    .then(function (response) {
        return response.json();
        })
    .then(function (data) {
        console.log(data);
        document.querySelector('.dollar').innerHTML = Math.round(data.conversion_rates.USD * document.querySelector('.value').value);
        })
}

Конвертер валюты должен содержать тысячные числа, но при умножении выводятся только нули. При этому же были переброваны варианты:
toFixed(4);
.toLocaleString()
parseFloat(document.querySelector('.value').value))

Вероятно я их неправильно написал, но делал примерно следующее с toFixed(4), причем это был самый рабочий вариант:

function сonvertCurrency() {

    fetch('https://v6.exchangerate-api.com/v6/353aabff81d47df9512e9535/latest/RUB')
    .then(function (response) {
        return response.json();
        })
    .then(function (data) {
        console.log(data);
        document.querySelector('.dollar').innerHTML = Math.round(data.conversion_rates.USD * document.querySelector('.value').value).toFixed(4);
        })
}

P.S. Если не сложно, помогите мне еще сделать чтобы при выборе EUR рубли переводились в евро, пожалуйста :)

Comments

[Александр Васильев]

Math.round убери

[VoidVolker]

Добавлю важное замечание: данное API выдает коэффициенты в виде чисел, что для работы с реальным деньгами недопустимо - для этого следует применять тип Decimal и соответствующие библиотечные решения. Т.о., это API не для продакшена и не более чем для ознакомления с примерными курсами.

Answer 1

[kryamk]

Проблема возникает из-за того, что значение, которое вы получаете из поля ввода, имеет тип строки (string), а не число (number). Поэтому при умножении строки на число происходит неожиданное поведение.

// Функция для конвертации валюты 
function сonvertCurrency() {
    fetch('https://v6.exchangerate-api.com/v6/353aabff81d47df9512e9535/latest/RUB')
    .then(function (response) {
        return response.json();
    })
    .then(function (data) {
        console.log(data);
        // Получение значения из поля ввода и преобразование его в число
        let inputValue = parseFloat(document.querySelector('.value').value);
        // Получение выбранной валюты из селектора
        let currency = document.querySelector('.currency-selector').value;
        // Проверка на NaN (не число)
        if (!isNaN(inputValue)) {
            // Умножение числа на соответствующий курс конвертации
            let result;
            if (currency === 'USD') {
                result = inputValue * data.conversion_rates.USD;
            } else if (currency === 'EUR') {
                result = inputValue * data.conversion_rates.EUR;
            }
            // Вывод результата с двумя знаками после запятой
            document.querySelector('.dollar').innerHTML = result.toFixed(2);
        } else {
            // Вывод сообщения об ошибке в случае некорректного ввода
            document.querySelector('.dollar').innerHTML = "Некорректное значение";
        }
    })
    .catch(function (error) {
        // Обработка ошибок fetch
        console.log("Ошибка при получении данных:", error);
    });
}

// Обработчик изменения значения селектора
document.querySelector('.currency-selector').addEventListener('change', сonvertCurrency);

Кстати, у вас в названии функции сonvertCurrency русская буква "с".
PS: как весело отвечать с gpt )