Блог

Главная - Вопросы по программированию - Изменить все цены на html-странице с одной валюты на другую?

Изменить все цены на html-странице с одной валюты на другую?

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть некоторый код, который изменяет валюту на странице с одной на другую, но проблема в том, что он не показывает знаки валюты и не принимает десятичные точки. проверьте приведенный ниже код.Кто-нибудь знает, как использовать знак валюты и валюту в десятичной системе счисления, например ($ 12.45) в приведенном ниже коде:

 var prices = [
    1500,
    2000,
    342
];
var rates = {
    USD: 1, // obviously
    EUR: 0.86
}
function updatePrices(rate) {
    var elements = document.getElementsByClassName("price");
    prices.forEach((price, index) => {
        elements[index].innerHTML = price * rate
    });
}
document.getElementById("selector").onchange = function () {
    updatePrices(rates[this.value]);
}
updatePrices(rates.USD); 
 <div class="row">
    <div class="input-field col s1">
        <select id="selector">
            <option value="USD" selected>USD</option>
            <option value="EUR">EUR</option>
        </select>
        <label>Currency</label>
    </div>
</div>
<ul class="currencies">
    <li class="price"></li>
    <li class="price"></li>
    <li class="price"></li>
</ul>

Комментарии:

1. когда вы обновляете HTML, innerHTML просто добавьте к нему знак доллара elements[index].innerHTML = '$' price * rate

2. @ Yash Karanke Вы знаете, сэр, как добавить цены для двух планов. Например, я использовал toggke для ежемесячных и годовых, и он показывает цены на ежемесячные планы, которые я пишу выше, то есть 1500, 2000, 342

Ответ №1:

Вы можете использовать toFixed для форматирования результата и объявления sing для каждой валюты (или любой другой переменной, на которую вам нужно, например, посмотреть something_at_the_end )

 var prices = [
    1500,
    2000,
    342
];            
var currencies = {
    USD: {
        rate: 1,
        sign: "$",
        something_at_the_end: "test"
    }, 
    EUR: {
        rate: 0.86,
        sign: "€",
        something_at_the_end: "EURO TEST"
    }
};
function updatePrices(currency) {
    var elements = document.getElementsByClassName("price");
    prices.forEach((price, index) => {
        elements[index].innerHTML = currency.sign   parseFloat(price * currency.rate)   currency.something_at_the_end
    });
}
document.getElementById("selector").onchange = function () {
    updatePrices(currencies[this.value]);
}
updatePrices(currencies.USD); 
 <div class="row">
    <div class="input-field col s1">
        <select id="selector">
            <option value="USD" selected>USD</option>
            <option value="EUR">EUR</option>
        </select>
        <label>Currency</label>
    </div>
</div>
<ul class="currencies">
    <li class="price"></li>
    <li class="price"></li>
    <li class="price"></li>
</ul>

parseFloat — это просто убедиться, что результатом является число

Комментарии:

1. Потрясающе … Могу ли я добавить что-то вроде этого / месяц / лицензия после цены .. я имею в виду $ 29.99 / месяц / лицензия что-то вроде этого

2. @VarunSood вы можете объявить все, что хотите, в объектах currencies и использовать это

3. @ angel.bonev Одна вещь, между $ и ценой есть пробел. Есть ли какой-нибудь способ удалить это?

4. Просто измените это elements[index].innerHTML = currency.sign " " parseFloat(price * currency.rate) currency.something_at_the_end на elements[index].innerHTML = currency.sign parseFloat(price * currency.rate) currency.something_at_the_end

5. @VarunSood я обновил свой ответ. Если вы хотите, вы можете прочитать о конкатенации строк

Метки: