Question

我正在尝试为游戏市场构建货币转换器，并且我目前拥有该转换器，以便每种货币/付款方式的相应图标出现在输入栏中-它具有付款选项的默认选项，但在用户单击一个国家之前，span是空白的。如何设置默认值，以使图标100％出现？

我设法使其与付款方式图标一起使用，但是缺少国家图标图标

    const data = [
    {
        currency: 'paypal',
        we_buy: 0.50,
        we_sell: 0.68,
        img_path: 'img/paypal.svg',
        icon: 'fab fa-paypal'
    },
    {
        currency: 'debit',
        we_buy: 0.67,
        we_sell: 0.82,
        img_path: 'img/debit-card.svg',
        icon: 'far fa-credit-card'
    },
    {
        currency: 'btc',
        we_buy: 0.58,
        we_sell: 0.77,
        img_path: 'img/bitcoin.svg',
        icon: 'fab fa-btc'
    },
    {
        currency: 'ethereum',
        we_buy: 0.59,
        we_sell: 0.76,
        img_path: 'img/ethereum.svg',
        icon: 'fab fa-ethereum'
    }
];

const country = [
    {
        country_id: 'USA',
        country_currency: 'USD',
        img_path: 'img/united-states.svg',
        icon: 'fas fa-dollar-sign',
        rate: 1.0
    },
    {
        country_id: 'EUR',
        country_currency: 'EUR',
        img_path: 'img/european-union.svg',
        icon: 'fas fa-euro-sign',
        rate: 0.88
    },
    {
        country_id: 'UK',
        country_currency: 'GBP',
        img_path: 'img/united-kingdom.svg',
        icon: 'fas fa-pound-sign',
        rate: 0.78
    },  
    {
        country_id: 'CAN',
        country_currency: 'CAD',
        img_path: 'img/canada.svg',
        icon: 'fas fa-dollar-sign',
        rate: 1.33
    }
];

const countryContainer = document.getElementById("countries");
let selectedCountry = null;
var selectCountry = function (index) {
    const cdata = country[index];
    selectedCountry = country[index];
    document.getElementById("country-selected").innerHTML = `Country selected: ${cdata.country_currency}`;
    document.getElementById("country_icon").className = cdata.icon;
};

// Image container

const imagesContainer = document.getElementById("currencies");
let selectedCurrency = null;
var selectCurrency = function (index) {
    const element = data[index];
    selectedCurrency = data[index];
    document.getElementById("currency-selected").innerHTML = `Currency selected: ${element.currency}`;
    document.getElementById("data_icon").className = element.icon; 
};

// made function originally in amount.onkeyup have a greater scope
const calculate = () => {
    const output_we_sell = document.getElementById("output_we_sell");
    if (amount.value === '') {
        output_we_sell.innerHTML = 0;
        return;
    }
    if (!isNaN(amount.value)) {
        output_we_sell.innerHTML = `${(+amount.value * selectedCurrency.we_sell).toFixed(2)}`;
    }
};
// ...
var selectCurrency = function (index) {
    const element = data[index];
    selectedCurrency = data[index];
    document.getElementById("currency-selected").innerHTML = `Currency selected: ${element.currency}`;
    document.getElementById("data_icon").className = element.icon;
    calculate(); // Added calculate here
};

var selectCountry = function (index) {
    const cdata = country[index];
    selectedCountry = country[index];
    document.getElementById("country-selected").innerHTML = `Currency selected: ${cdata.country}`;
    document.getElementById("country_icon").className = cdata.icon;
    calculate();
};

// ...
(() => {
    for (let i = 0; i < data.length; i++) {
        imagesContainer.innerHTML += `<div class="currency" onclick=selectCurrency(${i})><img id=${i} src=${data[i].img_path}></div>`;
    }
    selectCurrency(0);
    const amount = document.getElementById("amount");
    amount.onkeyup = calculate; // Changed this to use the calculate function{
    for (let i = 0; i < country.length; i++) {
        countryContainer.innerHTML += `<div class="country" onclick=selectCountry(${i})><img id=${i} src=${country[i].img_path}></div>`; 
    }
}

)();

第一行是选择国家/地区，第二行是付款方式（在html / js中-货币=付款方式简称）

该付款方式的图标应在页面加载时显示，而不是在用户单击其原籍国之后显示

Answer 1

我遍历了您的代码，发现您没有调用函数来设置默认国家/地区。只需在第117行中添加selectCountry(0);，它就可以正常工作。

如何使用Javascript设置默认选项？

1 个答案: