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

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

首先； 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>