JavaScript货币转换器

问题描述 投票:-1回答:1

需要帮助我会感激你的。嗨,我正在做一项任务如果你可以帮助我做错了什么,这将是一个很大的帮助

    <div id="box">
        <h2>Currency Converter</h2>
        <table>
            <tr>
            <td><input id="fromAmount" type="text" size="15" value="0" onkeyup="conCurrency();"/></td>
            <td>
                <select id="from" onchange="conCurrency();">   
                <option value="EUR">Euro (EUR)</option>
                <option value="USD">American Dollar (USD)</option>
                <option value="GBP">British Pound (GBP)</option>
                <option value="JPY">Japanese Yen (JPY)</option>
                <option value="CAD">Canadian Dollar (CAD)</option>
            </select>
        </td>
       </tr>
       <tr><td><input id="toAmount" size="15" type="text" disabled onkeyup="conCurrency();"/></td>
        <td>
            <select id="to" onchange="conCurrency();">   
            <option value="EUR">Euro (EUR)</option>
            <option value="USD">American Dollar (USD)</option>
            <option value="GBP">British Pound (GBP)</option>
            <option value="JPY">Japanese Yen (JPY)</option>
            <option value="CAD" selected>Canadian Dollar (CAD)</option>
        </select>
    </td></tr>
         </table> 

这是我昨天以来一直在使用的Java脚本但是我无法使它工作。

var rates = {
    'EUR': 
        {'USD': 1.13, 'GBP':0.86,'YEN':127.274,'CAD':1.51}, 
    'USD': 
        {'CAD':1.33,'EUR': 0.87,'GBP':0.76,'YEN':111.96},
    'GBP':
        {'CAD':1.76,'EUR':1.16 ,'USD':1.32,'YEN':147.86}, 

    'YEN':
        {'CAD':0.0119,'EUR':0.0079 ,'USD':0.0089,'GBP':0.0068},
    'CAD':
        {'YEN':84.23,'EUR':0.66 ,'USD':0.75,'GBP':0.57}}
function conCurrency(){
    var from= document.getElementById("from").Value;
    var to= document.getElementById("to").Value;
    var fAmount =document.getElementById("fromAmount").value
    var result =0;
    if(rates[from.value] && rates[from.value][to.value]){
        result.value = fAmount * rates[from.value][to.value];
   document.getElementById("toAmount") = result;

    }
}
javascript html html5
1个回答
1
投票

您有几个问题,都与使用value属性有关:

  • 它区分大小写,所以.Value错了。它应该是.value
  • 当你将value属性中的值赋给变量时,你不应该从该变量中获取value属性,因为那样你基本上做了错误的.value.value

请参阅更正后的代码中的注释:

var rates = {
  'EUR': { 'USD': 1.13, 'GBP': 0.86, 'YEN': 127.274, 'CAD': 1.51 },
  'USD': { 'CAD': 1.33, 'EUR': 0.87, 'GBP': 0.76, 'YEN': 111.96 },
  'GBP': { 'CAD': 1.76, 'EUR': 1.16, 'USD': 1.32, 'YEN': 147.86 },
  'YEN': { 'CAD': 0.0119, 'EUR': 0.0079, 'USD': 0.0089, 'GBP': 0.0068 },
  'CAD': { 'YEN': 84.23, 'EUR': 0.66, 'USD': 0.75, 'GBP': 0.57 }
};

function conCurrency() {
  var from = document.getElementById("from").value; // <-- small "v"
  var to = document.getElementById("to").value;
  var fAmount = document.getElementById("fromAmount").value
  var result = 0;
  if (rates[from] && rates[from][to]) { // <--- not again .value!
    result = fAmount * rates[from][to]; // <-- variable result, not result.value
    document.getElementById("toAmount").value = result; // <--- you need .value here.
  }
}
<div id="box">
  <h2>Currency Converter</h2>
  <table>
    <tr>
      <td><input id="fromAmount" type="text" size="15" value="0" onkeyup="conCurrency();" /></td>
      <td>
        <select id="from" onchange="conCurrency();">
          <option value="EUR">Euro (EUR)</option>
          <option value="USD">American Dollar (USD)</option>
          <option value="GBP">British Pound (GBP)</option>
          <option value="JPY">Japanese Yen (JPY)</option>
          <option value="CAD">Canadian Dollar (CAD)</option>
        </select>
      </td>
    </tr>
    <tr>
      <td><input id="toAmount" size="15" type="text" disabled onkeyup="conCurrency();" /></td>
      <td>
        <select id="to" onchange="conCurrency();">
          <option value="EUR">Euro (EUR)</option>
          <option value="USD">American Dollar (USD)</option>
          <option value="GBP">British Pound (GBP)</option>
          <option value="JPY">Japanese Yen (JPY)</option>
          <option value="CAD" selected>Canadian Dollar (CAD)</option>
        </select>
      </td>
    </tr>
  </table>
© www.soinside.com 2019 - 2024. All rights reserved.