Question

我目前有一个可以正常工作的货币转换器，但是当用户选择其他货币时，我希望计算自动进行而不必按回车键。我认为这需要为单击添加事件侦听器，但我似乎无法使其正常工作。

我尝试设置事件监听器，但我认为引用的是错误的东西。

function init() {


const data = [
    {
        currency: 'btc',
        we_buy: 0.58,
        we_sell: 0.77,
        img_path: 'img/bitcoin.svg',
        icon: 'fab fa-btc'
    },
    {
        currency: 'usd',
        we_buy: 0.67,
        we_sell: 0.82,
        img_path: 'img/united-states.svg',
        icon: 'fas fa-dollar-sign'
    },
    {
        currency: 'gbp',
        we_buy: 0.50,
        we_sell: 0.68,
        img_path: 'img/united-kingdom.svg',
        icon: 'fas fa-pound-sign'
    },
    {
        currency: 'eur',
        we_buy: 0.59,
        we_sell: 0.76,
        img_path: 'img/european-union.svg',
        icon: 'fas fa-euro-sign'
    }
];


// Image container

const imagesContainer = document.getElementById("currencies");
imagesContainer.addEventListener('click', output_we_sell);
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; 
};


(() => {
    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 = () => {
        const output_we_buy = document.getElementById("output_we_buy");
        const output_we_sell = document.getElementById("output_we_sell");
        if (amount.value === '') {
            output_we_buy.innerHTML = 0;
            output_we_sell.innerHTML = 0;
            return;
        }
        if (!isNaN(amount.value)) {
            output_we_buy.innerHTML = `${(+amount.value * selectedCurrency.we_buy).toFixed(2)}`;
            output_we_sell.innerHTML = `${(+amount.value * selectedCurrency.we_sell).toFixed(2)}`;
        }
    }
}

)();

}

document.addEventListener("DOMContentLoaded", init)

    <div class="container-fluid">
        <div class="currencies-container">
            <div class="currencies" id="currencies">

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

            <div class="output">
                <div class="row">
                    <div class="input-group">
                        <input type="text" maxlength="5" pattern="[0-9]{4}" min="0" max="99999"class="form-control" aria-label="Amount of GP in Millions" placeholder="Amount of GP (in millions)"
                            id="amount">
                        <div class="input-group-append">
                            <span class="input-group-text"><i id="data_icon"></i></span>
                            <span class="input-group-text" id="output_we_buy">.00</span>
                            <span class="input-group-text" id="output_we_sell">.00</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

我希望脚本能够在用户单击另一种货币而不是按Enter时生成新结果。

Answer 1

在代码中，您已经将匿名函数存储在底部amount.onkeyup()范围之外的底部值selectCurrency()中，因此selectCurrency()无法访问它。您需要扩大范围，然后在所需的地方使用它。

// made function originally in amount.onkeyup have a greater scope
const calculate = () => {
    const output_we_buy = document.getElementById("output_we_buy");
    const output_we_sell = document.getElementById("output_we_sell");
    if (amount.value === '') {
        output_we_buy.innerHTML = 0;
        output_we_sell.innerHTML = 0;
        return;
    }
    if (!isNaN(amount.value)) {
        output_we_buy.innerHTML = `${(+amount.value * selectedCurrency.we_buy).toFixed(2)}`;
        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
};

// ...
(() => {
    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
}

如果用户单击其他选项，如何使值自动更新？

1 个答案: