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

我正在尝试为游戏市场构建一个货币转换器&我目前拥有它，以便在输入栏中显示每个货币/支付方法的相应图标-它有一个默认的支付选项，但在用户单击某个国家之前，范围是空白的。如何设置默认值，使图标在100%的时间内显示

我设法使它与付款方式图标的工作，但我错过了一些与国家图标

const数据=[
{
货币：“贝宝”，
我们购买：0.50，
我们销售：0.68，
img_路径：“img/paypal.svg”，
图标：“fab fa paypal”
},
{
货币：'借方'，
我们购买：0.67，
我们销售：0.82，
img_路径：“img/debit card.svg”，
图标：“远发信用卡”
},
{
货币：“btc”，
我们购买：0.58，
我们销售：0.77，
img_路径：“img/bitcoin.svg”，
图标：“fab fa btc”
},
{
货币：“以太坊”，
我们购买：0.59，
我们销售：0.76，
img_路径：“img/ethereum.svg”，
图标：“以太坊工厂”
}
];
常量国家=[
{
国家编号：“美国”，
国家/地区货币：“美元”，
img_路径：“img/united.svg”，
图标：“美元标志”，
比率：1.0
},
{
国家编号：“欧元”，
国家/地区货币：欧元，
img_路径：“img/european union.svg”，
图标：“fas fa euro sign”，
比率：0.88
},
{
国家编号：“英国”，
国家/地区货币：“英镑”，
img_路径：“img/unitedkingdom.svg”，
图标：“fas fa磅标志”，
比率：0.78
},  
{
国家/地区id:'可以'，
国家(货币):"加元",，
img_路径：“img/canada.svg”，
图标：“美元标志”，
比率：1.33
}
];
const countryContainer=document.getElementById（“国家”）；
让selectedCountry=null；
var selectCountry=功能（索引）{
const cdata=国家[索引]；
selectedCountry=国家[索引]；
document.getElementById（“选定国家”）.innerHTML=`选定国家：${cdata.country\u currency}`；
document.getElementById（“国家/地区图标”）.className=cdata.icon；
};
//图像容器
const imagesContainer=document.getElementById（“货币”）；
让selectedCurrency=null；
var selectCurrency=函数（索引）{
常量元素=数据[索引]；
selectedCurrency=数据[索引]；
document.getElementById（“选定的货币”）.innerHTML=`选定的货币：${element.currency}`；
document.getElementById（“数据图标”）.className=element.icon；
};
//使原来在amount.onkeyup中的函数具有更大的范围
常量计算=（）=>{
const output_we_sell=document.getElementById（“output_we_sell”）；
如果（amount.value==''）{
output_we_sell.innerHTML=0；
回来
}
如果（！isNaN（金额值））{
output_we_sell.innerHTML=`${（+amount.value*selectedCurrency.we_sell.toFixed（2）}`；
}
};
// ...
var selectCurrency=函数（索引）{
常量元素=数据[索引]；
selectedCurrency=数据[索引]；
document.getElementById（“选定的货币”）.innerHTML=`选定的货币：${element.currency}`；
document.getElementById（“数据图标”）.className=element.icon；
calculate（）；//在此处添加了calculate
};
var selectCountry=功能（索引）{
const cdata=国家[索引]；
selectedCountry=国家[索引]；
document.getElementById（“选定国家”）.innerHTML=`选定货币：${cdata.country}`；
document.getElementById（“国家/地区图标”）.className=cdata.icon；
计算（）；
};
// ...
(() => {
for（设i=0；i

最上面的一行是国家选择&最下面的一行是付款方式（在html/js-currency=payment method中命名不好）

---

在页面加载时，付款方式的图标应该出现，而不是在用户点击他们的原产国之后。我查看了您的代码，发现您没有调用函数来设置默认国家。只需将

选择国家（0）；

添加到第117行，它就可以工作。

使用布尔运算符：

数据[I].img_path | |“defaultValue”

注意，您将货币设置为默认值，因此执行相同的操作，但在创建htmlYou绝对之星之前，请针对国家执行相同的操作！我不敢相信事情会如此简单！谢谢！

    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>`; 
    }
}

)();