使用JAVASCRIPT转换货币。无法通过我的函数设置转换的输入文本字段的值

I am trying to make a currency converter using html and javascript (without jquery). I have tried a lot of things but I can't set the value of the text field to the converted amount. What is going wrong with my code?

我正在尝试使用html和javascript(没有jquery)制作货币转换器。我尝试过很多东西,但是我无法将文本字段的值设置为转换后的数量。我的代码出了什么问题?

So what I am trying to do is basically check what currency my initial amount is, based on that call the right function to do the calculations and then set the value of the input field with id="cur2" to the result of those calculations. I have tried to do that with the following javascript code. I am only giving you the function for euro to other currencies (the rest work similarly):

所以我要做的是基本上检查我的初始金额是什么货币,根据调用正确的函数进行计算,然后将id =“cur2”的输入字段的值设置为这些计算的结果。我尝试使用以下javascript代码执行此操作。我只给你欧元对其他货币的功能(其余的工作类似):

window.onload = function() {
    document.getElementById("btnConvert").addEventListener("click", convert);
}

function convert() {
    var select = document.getElementById("currency1");
    var curr = select.options[select.selectedIndex].value;
    var val = document.getElementById("cur2").value;
    if (curr == "EUR") {
        val = EURtoOther();
    }
    if (curr == "USD") {
        val = USDtoOther();
    }
    if (curr == "GBP") {
        val = GBPtoOther();
    }
    if (curr == "AUD") {
        val = AUDtoOther();
    }
    if (curr == "JPY") {
        val = JPYtoOther();
    }
}

function EURtoOther() {
    var select = document.getElementById("currency2");
    var curr = select.options[select.selectedIndex].value;
    var initval = document.getElementById("cur1").value;
    if (curr == "EUR") {
        return initval * 1.0;
    }
    if (curr == "USD") {
        return initval * 1.13;
    }
    if (curr == "GBP") {
        return initval * 0.79;
    }
    if (curr == "AUD") {
        return initval * 1.55;
    }
    if (curr == "JPY") {
        return initval * 123.27;
    }
}

    <select id="currency1">
        <option value="EUR">Euro</option>
        <option value="USD">US Dollar</option>
        <option value="GBP">British Pound</option>
        <option value="AUD">Australian Dollar</option>
        <option value="JPY">Japanese Yen</option>
    </select>
    <input type="number" id="cur1">
    <button id="btnConvert">Convert</button>
    <select id="currency2">
        <option value="EUR">Euro</option>
        <option value="USD">US Dollar</option>
        <option value="GBP">British Pound</option>
        <option value="AUD">Australian Dollar</option>
        <option value="JPY">Japanese Yen</option>
    </select>
    <input type="text" id="cur2">

Not working and I don't know why. Thanks in advance.

不工作,我不知道为什么。提前致谢。

2 个解决方案

#1

You are not setting the value of second textbox. Use

您没有设置第二个文本框的值。使用

document.getElementById("cur2").value = val;

to set the value of second textbox

设置第二个文本框的值

window.onload = function() {
    document.getElementById("btnConvert").addEventListener("click", convert);
}

function convert() {
    var select = document.getElementById("currency1");
    var curr = select.options[select.selectedIndex].value;
    var val = document.getElementById("cur2").value;
    if (curr == "EUR") {
        val = EURtoOther();
    }
    if (curr == "USD") {
//        val = USDtoOther();
    }
    if (curr == "GBP") {
//        val = GBPtoOther();
    }
    if (curr == "AUD") {
//        val = AUDtoOther();
    }
    if (curr == "JPY") {
//        val = JPYtoOther();
    }
  document.getElementById("cur2").value = val;
}

function EURtoOther() {
    var select = document.getElementById("currency2");
    var curr = select.options[select.selectedIndex].value;
    var initval = document.getElementById("cur1").value;
    if (curr == "EUR") {
        return initval * 1.0;
    }
    if (curr == "USD") {
        return initval * 1.13;
    }
    if (curr == "GBP") {
        return initval * 0.79;
    }
    if (curr == "AUD") {
        return initval * 1.55;
    }
    if (curr == "JPY") {
        return initval * 123.27;
    }
}

<select id="currency1">
        <option value="EUR">Euro</option>
        <option value="USD">US Dollar</option>
        <option value="GBP">British Pound</option>
        <option value="AUD">Australian Dollar</option>
        <option value="JPY">Japanese Yen</option>
    </select>
    <input type="number" id="cur1">
    <button id="btnConvert">Convert</button>
    <select id="currency2">
        <option value="EUR">Euro</option>
        <option value="USD">US Dollar</option>
        <option value="GBP">British Pound</option>
        <option value="AUD">Australian Dollar</option>
        <option value="JPY">Japanese Yen</option>
    </select>
    <input type="text" id="cur2">

#2

You have to do document.getElementById().value = val;. val is not reffering to that element, it is just a value so you need to set it after.

你必须做document.getElementById()。value = val;。 val不是对该元素的反应,它只是一个值,所以你需要在之后设置它。

https://jsfiddle.net/stevenkaspar/aphxcpcs/

#1