javascript - 如何使用 Javascript 设置默认选项?
问题描述
我正在尝试为游戏市场构建货币转换器,并且我目前拥有它,以便每种货币/付款方式的相应图标出现在输入栏中 - 它具有付款选项的默认选项,但范围为空白直到用户点击一个国家。如何设置默认值以使图标 100% 出现?
我设法使它与付款方式图标一起使用,但我缺少国家图标的东西
https://codepen.io/anon/pen/byXrWN
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 中命名不佳 - 货币 = 付款方式)
付款方式的图标应该在页面加载时出现,而不是在用户点击他们的原籍国之后
解决方案
我浏览了您的代码,发现您没有调用函数来设置默认国家/地区。只需添加selectCountry(0);
到第 117 行,它应该可以工作。
推荐阅读
- python - Python:Plotly 3D 曲面图
- json - 通过 API 抓取网页 - Python - 请求库
- javascript - 如何运行用户输入 Ace 编辑器的代码
- sql - 选择更高优先级的行并返回它的值,按类型分组
- image - MATLAB:准备用于数字和字母识别的 RGB 图像
- image - Airflow DockerOperator 找不到某些图像,但可以找到其他图像
- serverless - 尝试连接到 AWS Serverless
- swift - UIBezierPath 填充封闭区域内
- html - 如何在 SCSS 颜色函数中控制 HSLA Alpha 通道?
- php - 如何将 Android 应用程序连接到 LAMP 服务器