在 javascript 中引用选择菜单 HTML

Question

我对 html 很陌生，对一般的编码也很陌生。我知道这是基本的，但我发现根据我的需要调整别人的代码比仅仅通过教程学习更快。

我想创建一个货币兑换网站。我想选择一种货币，输入金额，然后看看我能得到多少英镑作为回报。

我的代码；

function Converter(){

  if (document.converter.currency.value = EUR)

    document.converter.pound.value = document.converter.ammount.value * 0.9


  if (document.converter.currency.value = USD)

    document.converter.pound.value = document.converter.ammount.value * 0.6
}

<form name="converter">
  <table border="0">
    <tr>
      <td>
        <select name = "currency">
        <option value="EUR" selected> Euro </option>
        <option value="USD">Dollar</option></select>
      </td>

      <td>
        <input type="text" name="ammount" onChange="Converter()" />
      </td>
    </tr>
    <tr>
     <td>£:</td>
     <td><input type="text" name="pound" disabled /></td>
    </tr>
  </table>
</form>

我想知道这是否是正确的方法，主要是如何在 javascript 中引用选择菜单。

感谢您的宝贵时间！

Answer 1

演示

function Converter(){

  if (document.converter.currency.value == 'EUR')

  document.converter.pound.value = document.converter.ammount.value * 0.9 ;


  if (document.converter.currency.value == 'USD')

  document.converter.pound.value = document.converter.ammount.value * 0.6 ;
}

<form name="converter">
  <table border="0">
    <tr>
      <td>
        <select name = "currency">
        <option value="EUR" selected> Euro </option>
        <option value="USD">Dollar</option></select>
      </td>

      <td>
        <input type="text" name="ammount" onkeyup="Converter()" />
      </td>
    </tr>
    <tr>
     <td>£:</td>
     <td><input type="text" name="pound" disabled /></td>
    </tr>
  </table>
</form>

有一个事件onchange，它在元素更改和焦点输出后触发。您可以使用onkeyup/onkeydown 获取按键结果。

在您的脚本部分中，您正在分配 value 。 Check

Answer 2

<script language="JavaScript">

function Converter(){

if (document.converter.currency.value = "EUR") //fix here

document.converter.pound.value = document.converter.ammount.value * 0.9


if (document.converter.currency.value = "USD") // also fix here

document.converter.pound.value = document.converter.ammount.value * 0.6
}
</script>

您遗漏了一些急需的报价，请修复它们。而对于 DOM 相关的部分，this thread might help.

Answer 3

你反对使用 JQuery 吗？您实际上可以使用 AJAX 从fixer.io 之类的服务中获取最新费率。这将确保您的转化率保持准确。

在 JQuery 中执行所有这些操作的语法要简单得多，但可以在原生 JavaScript 中完成。

$(document).ready(function() {
  // update on input
  $("#amount").on("input", function() {
    var currency = $("#converter option:selected").val();
    convertCurrency(currency);
  });

  // update on select menu change
  $("#converter").change(function() {
    convertCurrency($(this).val());
  });
});

// convert currency using live rates from fixer.io
function convertCurrency(currency){
  var amount = $("#amount").val();
  $.get("https://api.fixer.io/latest?base=GBP", function(data) {
    var baseExchange = (amount / data.rates[currency]).toFixed(2);
    var commission = (baseExchange * 0.1).toFixed(2);
    // calculations
    $("#gbpBase").html(baseExchange);
    $("#commission").html(commission);
    $("#gbpTotal").html((baseExchange - commission).toFixed(2));
  });
}

#results-table {
  display: flex;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class='container jumbotron' style='padding-top: 0.5rem;'>
  <h4>Convert to GBP (£)</h4>
  <hr/>
  <table class='table table-striped'>
    <thead>
      <th>Currency</th>
      <th>Amount</th>
    </thead>
    <tbody>
      <tr>
        <td>
          <select class='form-control' name="currency" id="converter">
            <option value="EUR" selected>Euro (€)</option>
            <option value="USD">US Dollar ($)</option>            
          </select>
        </td>
        <td>
          <input class='form-control' type="text" name="amount" placeholder='Enter amount' id="amount" />
        </td>
      </tr>
    </tbody>
  </table>

  <table class="table" id="results-table">
    <tbody>
      <tr>
        <th>Base Exchange</th>
        <td>&nbsp;&nbsp;&nbsp;£: <span id="gbpBase">0.00</span></td>
      </tr>
      <tr>
        <th>Commission (10%)</th>
        <td>- £: <span id='commission'>0.00</span></td>
      </tr>
      <tr>
        <th>Exchange Amount</th>
        <td><strong>&nbsp;&nbsp;&nbsp;£: <span id="gbpTotal">0.00</span></strong></td>
      </tr>
    </tbody>
  </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

更新CodePen Demo