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

Question

Why does it get same value?? and how to attach currency sign after result? also, How to make it more briefly? I want to amend the repeating code.

 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

Your condition Problem giving. Try as below

<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

Firstly; Id properties have to be unique in html files. check your id props and give different names. Then get values with document.getElementById("CurrencyID1").value and check their values in if conditions.

check the following solution:

 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

Euro (EUR) US Dollar (USD) UK Pound Sterling (GBP) Japanese Yen (JPY) Canadian Dollor (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 code

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;
}

This way you will have to adjust the condition for all of them

Now lets see that all will be convart from USD

Answer 4

1- you are not getting value of select's 2- you need InnerHTML not inner text 3- I guess simple map would be better than 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

I just wanted to give you a cleaner solution:

Note: The CurrencyList object contains the implementation of the conversion for each respective currency to the other. So I have only worked out the Parsing of Euro to other currencies you've listed. So You might have to do this for every currency on the list.

 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>