Question

我打算做的是一个非常简单的货币转换器。基本上，你键入一个数字，然后按一个按钮，显示一个文字，上面写着“x dollar is y euros”。再次按下按钮，显示旧文本的新文本，旧文本显示在新文本下。

我到目前为止，当在该字段中输入某些内容时，它会在下方弹出，如果您再次按下该按钮（具有相同或不同的值），它将成为文本列表。

为了澄清我在这里说的是什么，请看看这个jsfiddle：http://jsfiddle.net/w8KAS/5/

现在我想让它只有数字才有效，所以按下按钮时会转换数字（x）并显示在一些拟合文本旁边（如“x dollar is y euros”）

这是我的js代码，查看jsfiddle完整代码（html，js，css）

有什么建议吗？

var count = 0;

function validate() {

   var amount = document.querySelector("#amount");

   if(amount.value.length > 0) {
       amount.className = 'correct';
   }

   else {
    amount.className = 'empty';
   }

   if (document.querySelector('.empty')) {
    alert('Något är fel');
   }

   else {
   addconvert(amount.value);
   }    
}

function addconvert(amount) {

   var table = document.querySelector('#tbody');
   var tr = document.createElement('tr');
   var amountTd = document.createElement('td');


   var amountTextNode = document.createTextNode(amount);

   amountTd.appendChild(amountTextNode)
   tr.appendChild(amountTd);

   table.insertBefore(tr, table.firstChild);

   count++;     
}



var button = document.querySelector(".button");

button.onclick = validate;

Answer 1

您需要一个转换率（对此有APIs），然后您可以将它们一起添加到字符串中

var convRate = 1.3; 
var amountTextNode = document.createTextNode(amount + " dollars is " + amount*convRate + " euros");

关于API，雅虎会在没有登录的情况下告诉您需要什么

$.ajax({
  url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.xchange%20where%20pair%20in%20(%22USDEUR%22)&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback="
}).done(function(data) { 
  convRate = data.query.results.rate.Rate
});

Answer 2

您的号码验证失败。将验证的第一部分更改为：

 function validate() {

    var amount = document.querySelector("#amount");
    var amountNum = parseFloat(amount.value);  //This is the numeric value, use it for calculations

    if(amount.value.length > 0 && !isNaN(amountNum) ) {
        amount.className = 'correct';
        amount.value = amountNum;
    }
    ...

在此工作：http://jsfiddle.net/edgarinvillegas/w8KAS/6/

干杯

Answer 3

要确保只有数字有效，您可以使用amount.value函数测试变量isNaN。如果用户的输入为非数字，则返回true，因此如果返回false，则可以继续进行转换。

if (!isNaN(amount.value)){
  addconvert(+amount.value)  // the plus symbol converts to a number
} else {
  // display error here
}

在addconvert功能中，您可以添加代码，将输入金额乘以汇率以进行粗略转换。

function addconvert(){
  // ...

  var euros = 0.74 * amount
  var text = amount + ' dollars is ' + euros + ' euros'
  var amountTextNode = document.createTextNode(text);

Javascript：以前转换的简单货币转换器

3 个答案: