在输入内容之前，不会显示货币标识符

Question

我的货币转换器当前仅在输入框中输入内容后才在输出后面显示适当的货币标识符

我认为最合逻辑的事情是

${selectedCountry.country_method}

到 first if语句

const calculate = () => {
    const output_we_sell = document.getElementById("output_we_sell");
    if (amount.value === '') {
        output_we_sell.innerHTML = `0.00`; // In this line
        return;
    }
    if (!isNaN(amount.value)) {
        output_we_sell.innerHTML = `${amount.value * selectedMethod.we_sell * selectedCountry.rate.toFixed(2)} ${selectedCountry.country_method}`;
    }
};

破坏整个脚本

在用户输入任何内容之前，如何使适当的货币显示在0.00后面？

JS：

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

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

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_method}`;
    document.getElementById("country_icon").className = cdata.icon;
};

// Image container

const imagesContainer = document.getElementById("methods");
let selectedMethod = null;
var selectMethod = function (index) {
    const element = data[index];
    selectedMethod = data[index];
    document.getElementById("method-selected").innerHTML = `Method selected: ${element.method}`;
    document.getElementById("data_icon").className = element.icon; 
};

// made function originally in amount.onkeyup have a greater scope
function clearInvalid() {
    var input = document.getElementById('amount')
    input.value = input.value.replace(/[^\d]/g,'')
  }
const calculate = () => {
    const output_we_sell = document.getElementById("output_we_sell");
    if (amount.value === '') {
        output_we_sell.innerHTML = '0.00';
        return;
    }
    if (!isNaN(amount.value)) {
        output_we_sell.innerHTML = `${((+amount.value * selectedMethod.we_sell) * selectedCountry.rate).toFixed(2)} ${(selectedCountry.country_method)}`;
    }
};
// ...
var selectMethod = function (index) {
    const element = data[index];
    selectedMethod = data[index];
    document.getElementById("method-selected").innerHTML = `Method selected: ${element.method}`;
    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 = `Method selected: ${cdata.country}`;
    document.getElementById("country_icon").className = cdata.icon;
    calculate();
};

// ...
(() => {
    for (let i = 0; i < data.length; i++) {
        imagesContainer.innerHTML += `<div class="method" onclick=selectMethod(${i})><img id=${i} src=${data[i].img_path}></div>`;
    }
    selectMethod(0);
    selectCountry(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>`; 
    };
}


)();

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css">

    <div class="container-fluid">
        <div class="methods-container" data-aos="fade-right">
            <div class="method-info">
                <h2>So... You want to buy some gold?</h2>
                <p>Use our conversion rate calculator</p>
            </div>
            <div class="countries" id="countries">

            </div>
            <div class="country-selected" id="country-selected">
                No country selected.
            </div>

            <div class="methods" id="methods">

            </div>
            <div class="method-selected" id="method-selected">
                No method selected.
            </div>

            <div class="output">
                <div class="row">
                    <div class="input-group">
                        <form>
                            <div class="input-group-prepend">
                                    <span class="input-group-text"><i id="data_icon"></i></span>
                            </div>
                            <input type="text" maxlength="5" onkeypress='clearInvalid()' class="form-control" aria-label="Amount of GP in Millions" placeholder="Amount of Gold" id="amount">
                        <div class="input-group-append">
                            <span class="input-group-text"><i id="country_icon"></i></span>
                            <span class="input-group-text" id="output_we_sell"></span>
                        </div>
                    </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

https://codepen.io/anon/pen/OeLeJm

Answer 1

要解决此问题，您需要做的就是更改两个功能的顺序：

在选择方法之前运行selectCountry：

selectCountry(0);
selectMethod(0);

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

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

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_method}`;
    document.getElementById("country_icon").className = cdata.icon;
};

// Image container

const imagesContainer = document.getElementById("methods");
let selectedMethod = null;
var selectMethod = function (index) {
    const element = data[index];
    selectedMethod = data[index];
    document.getElementById("method-selected").innerHTML = `Method selected: ${element.method}`;
    document.getElementById("data_icon").className = element.icon; 
};

// made function originally in amount.onkeyup have a greater scope
function clearInvalid() {
    var input = document.getElementById('amount')
    input.value = input.value.replace(/[^\d]/g,'')
  }
const calculate = () => {
    const output_we_sell = document.getElementById("output_we_sell");
    if (amount.value === '') {
        output_we_sell.innerHTML = `0.00 ${(selectedCountry.country_method)}`;
        return;
    }
    if (!isNaN(amount.value)) {
        output_we_sell.innerHTML = `${((+amount.value * selectedMethod.we_sell) * selectedCountry.rate).toFixed(2)} ${(selectedCountry.country_method)}`;
    }
};
// ...
var selectMethod = function (index) {
    const element = data[index];
    selectedMethod = data[index];
    document.getElementById("method-selected").innerHTML = `Method selected: ${element.method}`;
    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 = `Method selected: ${cdata.country}`;
    document.getElementById("country_icon").className = cdata.icon;
    calculate();
};

// ...
(() => {
    for (let i = 0; i < data.length; i++) {
        imagesContainer.innerHTML += `<div class="method" onclick=selectMethod(${i})><img id=${i} src=${data[i].img_path}></div>`;
    }
    
    selectCountry(0);
    selectMethod(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>`; 
    };
}


)();

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css">

    <div class="container-fluid">
        <div class="methods-container" data-aos="fade-right">
            <div class="method-info">
                <h2>So... You want to buy some gold?</h2>
                <p>Use our conversion rate calculator</p>
            </div>
            <div class="countries" id="countries">

            </div>
            <div class="country-selected" id="country-selected">
                No country selected.
            </div>

            <div class="methods" id="methods">

            </div>
            <div class="method-selected" id="method-selected">
                No method selected.
            </div>

            <div class="output">
                <div class="row">
                    <div class="input-group">
                        <form>
                            <div class="input-group-prepend">
                                    <span class="input-group-text"><i id="data_icon"></i></span>
                            </div>
                            <input type="text" maxlength="5" onkeypress='clearInvalid()' class="form-control" aria-label="Amount of GP in Millions" placeholder="Amount of Gold" id="amount">
                        <div class="input-group-append">
                            <span class="input-group-text"><i id="country_icon"></i></span>
                            <span class="input-group-text" id="output_we_sell"></span>
                        </div>
                    </form>
                    </div>
                </div>
            </div>
        </div>
    </div>