为什么它得到相同的值？ 以及如何在结果后附加货币符号？

Question

为什么它得到相同的值？ 以及如何在结果后附加货币符号？ 另外，如何使它更简洁？ 我想修改重复代码。

 function changeSign() { var currencySelect = document.getElementById("CurrencyID").value; } function changeCurrency() { var inputVal = parseFloat(document.getElementById("inputMoney").value); var currencyVal = parseFloat(document.getElementById("inputMoney")); if (document.getElementById("Euro")) { if (document.getElementById("Us1")) { currencyVal = (inputVal * 1.08); } else if (document.getElementById("Uk1")) { currencyVal = (inputVal * 0.83); } else if (document.getElementById("Ja1")) { currencyVal = (inputVal * 118.88); } else if (document.getElementById("Ca1")) { currencyVal = (inputVal * 1.43); } } document.getElementById("demo").textContent = currencyVal; }

 <b>Choose Convert : </b><br><br> <select name="CurrencyConverter" id="CurrencyID" class="text ui-widget-content ui-corner-all" style="width: 200px; height:30px;" onchange="changeSign()"> <option id="Euro" value="&euro;">Euro (EUR)</option> <option id="Us" value="&dollar;">US Dollar (USD)</option> <option id="Uk" value="&pound;">UK Pound Sterling (GBP)</option> <option id="Ja" value="&yen;">Japanese Yen (JPY)</option> <option id="Ca" value="&#36;">Canadian Dollor (CAD)</option> </select> <br> <b>Choose Convert : </b><br><br> <select name="CurrencyConverter" id="CurrencyID" class="text ui-widget-content ui-corner-all" style="width: 200px; height:30px;"> <option id="Euro1" value="&euro;">Euro (EUR)</option> <option id="Us1" value="&dollar;">US Dollar (USD)</option> <option id="Uk1" value="&pound;">UK Pound Sterling (GBP)</option> <option id="Ja1" value="&yen;">Japanese Yen (JPY)</option> <option id="Ca1" value="&#36;">Canadian Dollor (CAD)</option> </select> <br> <label> <br> <input name="inputMoney" id="inputMoney" type="text" class="text ui-widget-content ui-corner-all" style="width: 196px; height:22px;" oninput="changeCurrency()" > </label><br><br> </div> </div> <p>value: <span id="demo"></span></p>

Answer 1

你的情况 问题给予。 尝试如下

<b>Choose Convert : </b><br><br>
            <select name="CurrencyConverter" id="CurrencyID" class="text ui-widget-content ui-corner-all"
                style="width: 200px; height:30px;">
                <option id="Euro1" value="Euro1">Euro (EUR)</option>
                <option id="Us1" value="Us1">US Dollar (USD)</option>
                <option id="Uk1" value="Uk1">UK Pound Sterling (GBP)</option>
                <option id="Ja1" value="Ja1">Japanese Yen (JPY)</option>
                <option id="Ca1" value="Ca1">Canadian Dollor (CAD)</option>
            </select>
            <br>

            <label>
                <br>
                <input name="inputMoney" id="inputMoney" type="text" class="text ui-widget-content ui-corner-all"
                    style="width: 196px; height:22px;" oninput="changeCurrency()"
                    >
            </label><br><br>

        </div>
    </div>

js

    function changeCurrency() {


    var currencySelect = document.getElementById("CurrencyID").value; 

    var inputVal = parseFloat(document.getElementById("inputMoney").value);
    var currencyVal = parseFloat(document.getElementById("inputMoney"));

    if (document.getElementById("Euro")) {

        if (currencySelect == "Us1") {

            currencyVal = (inputVal * 1.08);

        } else if (currencySelect == "Uk1") {

            currencyVal = (inputVal * 0.83);

        } else if (currencySelect == "Ja1") {

            currencyVal = (inputVal * 118.88);

        } else if (currencySelect == "Ca1") {

            currencyVal = (inputVal * 1.43);
        }

}

Answer 2

首先; Id 属性在 html 文件中必须是唯一的。 检查您的 id 道具并给出不同的名称。 然后使用 document.getElementById("CurrencyID1").value 获取值并在 if 条件中检查它们的值。

检查以下解决方案：

 function changeSign() { var currencySelect = document.getElementById("CurrencyID1").value; } function changeCurrency() { let firstCurrency = document.getElementById("CurrencyID1").value; let secondCurrency = document.getElementById("CurrencyID2").value; let inputVal = document.getElementById("inputMoney").value; let currencyVal=0; if (firstCurrency==="euro") { if (secondCurrency==="usd") { currencyVal = (inputVal * 1.08)+" $"; } else if (secondCurrency==="pound") { currencyVal = (inputVal * 0.83)+" £"; } else if (secondCurrency==="yen") { currencyVal = (inputVal * 118.88)+" ¥"; } else if (secondCurrency==="can") { currencyVal = (inputVal * 1.43)+ " $"; } } document.getElementById("demo").textContent = currencyVal; }

 <b>Choose Convert : </b><br><br> <select id="CurrencyID1" class="text ui-widget-content ui-corner-all" style="width: 200px; height:30px;" onchange="changeSign()"> <option id="Euro" value="euro">Euro (EUR)</option> <option id="Us" value="usd">US Dollar (USD)</option> <option id="Uk" value="pound">UK Pound Sterling (GBP)</option> <option id="Ja" value="yen">Japanese Yen (JPY)</option> <option id="Ca" value="can">Canadian Dollor (CAD)</option> </select> <br> <b>Choose Convert : </b><br><br> <select id="CurrencyID2" class="text ui-widget-content ui-corner-all" style="width: 200px; height:30px;"> <option id="Euro1" value="euro">Euro (EUR)</option> <option id="Us1" value="usd">US Dollar (USD)</option> <option id="Uk1" value="pound">UK Pound Sterling (GBP)</option> <option id="Ja1" value="yen">Japanese Yen (JPY)</option> <option id="Ca1" value="can">Canadian Dollor (CAD)</option> </select> <br> <label> <br> <input name="inputMoney" id="inputMoney" type="text" class="text ui-widget-content ui-corner-all" style="width: 196px; height:22px;" oninput="changeCurrency()"> </label><br><br> <p>value: <span id="demo"></span></p>

Answer 3

html

选择转换：

欧元 (EUR) 美元 (USD) 英镑 (GBP) 日元 (JPY) 加拿大元 (CAD)

    <b>Choose Convert : </b><br><br>
    <select name="CurrencyConverter" id="convartToCurrencyID" class="text ui-widget-content ui-corner-all" style="width: 200px; height:30px;">
        <option id="Euro1" value="Euro1">Euro (EUR)</option>
        <option id="Us1" value="Us1">US Dollar (USD)</option>
        <option id="Uk1" value="Uk1">UK Pound Sterling (GBP)</option>
        <option id="Ja1" value="Ja1">Japanese Yen (JPY)</option>
        <option id="Ca1" value="Ca1">Canadian Dollor (CAD)</option>
    </select>
    <br>

            <label>
                <br>
                <input name="inputMoney" id="inputMoney" type="text" class="text ui-widget-content ui-corner-all" style="width: 196px; height:22px;" oninput="changeCurrency()" >
            </label><br><br>

</div>
</div>

<p>value: <span id="demo"></span></p>

js代码

function changeCurrency() {

    var currencySelect = document.getElementById("CurrencyID").value;
    var convartToCurrencyID = document.getElementById("convartToCurrencyID").value;

  var inputVal = parseFloat(document.getElementById("inputMoney").value);
  var currencyVal = parseFloat(document.getElementById("inputMoney"));

        if (currencySelect == "Us1" && convartToCurrencyID == "Us1") {

        currencyVal = (inputVal * 1);

        } else if (currencySelect == "Us1" && convartToCurrencyID == "Uk1") {

        currencyVal = (inputVal * 0.83);

        } else if (currencySelect == "Us1" && convartToCurrencyID == "Ja1") {

        currencyVal = (inputVal * 118.88);

        } else if (currencySelect == "Us1" && convartToCurrencyID == "Ca1") {

        currencyVal = (inputVal * 1.43);
        }

  document.getElementById("demo").textContent = currencyVal;
}

这样，您将不得不调整所有条件

现在让我们看看一切都将来自美元

Answer 4

1-您没有获得选择的价值 2-您需要 InnerHTML 而不是内部文本 3-我想简单的地图会比 if elses 更好

 function changeSign() { var currencySelect = document.getElementById("CurrencyID").value; } function changeCurrency() { var inputVal = parseFloat(document.getElementById("inputMoney").value); var exchange={"euro;euro;":1, "euro;dollar;":1.08,"euro;pound;":0.83,"euro;yen;":1118.88,"euro;#36;":1.43 }; var ev=document.getElementById("CurrencyID1").value+document.getElementById("CurrencyID2").value; currencyVal=exchange[ev] *inputVal; document.getElementById("demo").innerHTML = currencyVal +" &"+document.getElementById("CurrencyID2").value; }

 <b>Choose Convert : </b><br><br> <select name="CurrencyConverter" id="CurrencyID1" class="text ui-widget-content ui-corner-all" style="width: 200px; height:30px;" onchange="changeSign()"> <option id="Euro" value="euro;">Euro (EUR)</option> <option id="Us" value="dollar;">US Dollar (USD)</option> <option id="Uk" value="pound;">UK Pound Sterling (GBP)</option> <option id="Ja" value="yen;">Japanese Yen (JPY)</option> <option id="Ca" value="#36;">Canadian Dollor (CAD)</option> </select> <br> <b>Choose Convert : </b><br><br> <select name="CurrencyConverter" id="CurrencyID2" class="text ui-widget-content ui-corner-all" style="width: 200px; height:30px;"> <option id="Euro1" value="euro;">Euro (EUR)</option> <option id="Us1" value="dollar;">US Dollar (USD)</option> <option id="Uk1" value="pound;">UK Pound Sterling (GBP)</option> <option id="Ja1" value="yen;">Japanese Yen (JPY)</option> <option id="Ca1" value="#36;">Canadian Dollor (CAD)</option> </select> <br> <label> <br> <input name="inputMoney" id="inputMoney" type="text" class="text ui-widget-content ui-corner-all" style="width: 196px; height:22px;" oninput="changeCurrency()" > </label><br><br> </div> </div> <p>value: <span id="demo"></span></p>

Answer 5

我只是想给你一个更干净的解决方案：

注意： CurrencyList对象包含每种货币到另一种货币的转换实现。 所以我只计算了欧元对您列出的其他货币的解析。 因此，您可能必须对列表中的每种货币执行此操作。

 var CurrencyList = { Euro: { sign: '€', Parse: function(value, desiredCurrency) { var result = 0; switch(desiredCurrency) { case 'Us': { result = value * 1.08 + CurrencyList[desiredCurrency].sign; } break; case 'Uk': { result = value * 0.83 + CurrencyList[desiredCurrency].sign; } break; case 'Ja': { result = value * 118.88 + CurrencyList[desiredCurrency].sign; } break; case 'Ca': { result = value * 1.43 + CurrencyList[desiredCurrency].sign; } break; } return result; } }, Uk: { sign: '£' }, Us: { sign: '$' }, Ja: { sign: '¥' }, Ca: { sign: '$' } }; document.getElementById("fromCurrencyID").addEventListener('change', function() { document.querySelector(".text-field__label").innerHTML = CurrencyList[document.getElementById("fromCurrencyID").value].sign; } ); document.getElementById("convertButton") .addEventListener('click', function() { var _fromCurrency = document.getElementById("fromCurrencyID").value; var _toCurrency = document.getElementById("toCurrencyID").value; if(_fromCurrency && _toCurrency) { document.getElementById("demo").innerHTML = CurrencyList[_fromCurrency].Parse(document.querySelector(".text-field__input").value,_toCurrency); } } );

 .text-field{ width: 218px; height: 32px; padding-left: 22px; } .text-field .text-field_part{ position: relative; padding: 5px; box-sizing: border-box; border: thin solid #cdcdcd; display: block; } .text-field .text-field__label{ position: absolute; width: 32px; height: 32px; text-align: center; background-color: #f5f5f5; left: 0; line-height: 20px; } .text-field .text-field__input { margin: 0; }

 <b>Choose Convert : </b><br><br> <select name="CurrencyConverter" id="fromCurrencyID" class="text ui-widget-content ui-corner-all" style="width: 200px; height:30px;"> <option value="Euro">Euro (EUR)</option> <option value="Us">US Dollar (USD)</option> <option value="Uk">UK Pound Sterling (GBP)</option> <option value="Ja">Japanese Yen (JPY)</option> <option value="Ca">Canadian Dollor (CAD)</option> </select> <br> <b>Choose Convert : </b><br><br> <select name="CurrencyConverter" id="toCurrencyID" class="text ui-widget-content ui-corner-all" style="width: 200px; height:30px;"> <option value="Euro">Euro (EUR)</option> <option value="Us">US Dollar (USD)</option> <option value="Uk">UK Pound Sterling (GBP)</option> <option value="Ja">Japanese Yen (JPY)</option> <option value="Ca">Canadian Dollor (CAD)</option> </select> <br> <label> <br> <div class="text-field"> <button class="text-field__label text-field_part"></button> <input name="inputMoney" class="text-field__input text-field_part" type="text" style="width: 196px; height:32px;" /> </div> </label><br><br> <button id="convertButton">Convert</button> <p>value: <span id="demo"></span></p>