JS-根据选定的下拉列表计算值

Question

因此，我有一个用于货币的计算器，它可以显示输入的金额，但货币价值不同。 （例如美元兑欧元）

这是HTML：

    <b> Exchange money </b> <br> <br>
Enter amount for RSD: <input type="number" name="nbsAmount" id="nbsAmount" size="5"> <br>
<button class="dugme">Calculate</button> <br> <br>
Evro value is: <div class="konacnaEvroVrednost"></div>
Dolar value is: <div class="konacnaDolarVrednost"></div>
Swiss value is: <div class="konacnaSwissrednost"></div>

这是JS：

$('.dugme').click(function(){
   var broj = document.getElementById('nbsAmount').value;   
   var evro = broj * 0.0085;
   var dolar = broj * 0.0095;
   var frank = broj * 0.0096;
   $('.konacnaEvroVrednost').text(evro + ' €');  
   $('.konacnaDolarVrednost').text(dolar + ' $');  
   $('.konacnaSwissrednost').text(frank + ' Fr');  
});

这很好用。如您所见：

这是小提琴： http://jsfiddle.net/5zvdwtpL/1/

但是现在我想更改它，使其更动态地工作。 我希望有两个下拉菜单，可让您选择要更改为的值。像这样：

这是我到目前为止得到的：https://jsfiddle.net/7s8g9kLt/2/

问题是应该将一个输入值复制到另一个输入值，但要添加货币的附加值。

因此，如果我选择RSD并设置1200（其他美元），则其他输入应显示11.4。

因此，我对如何实现此目标有些困惑。

Answer 1

首先，您已将myFunction绑定到按钮onClick Event，但尚未使用该名称定义函数。单击按钮后，您会在控制台中看到以下错误

Uncaught ReferenceError: myFunction is not defined

您将必须定义此功能：

window.myFunction = function() {...}

或更好的事件，将事件侦听器添加到按钮单击：

document.getElementById('buttonId').addEventListener('click', function() {...})

---

要计算动态汇率，我首先将输入金额转换为单一货币（例如RSD），然后将该值乘以正确的汇率。

我已经修改了您的jsFiddle（https://jsfiddle.net/rhj4dgz7/3/）以反映这些更改。

Answer 2

您可以创建一个带有下拉列表的“ id”和转换率对的字典，也可以为两个下拉列表提供相同的id。那么您只需将值乘以比率，然后将结果添加到第二个输入中即可。

var rsd = 1;
var evro = 0.0085;

var dolar = 0.0095;
var frank = 0.0096;

var dict = {
"4":rsd,
"1":evro,
"3":dolar,
"2":frank
}



function myFunction(){
var mvs = document.getElementById('mojaVrednostSelect').value;
var nvs = document.getElementById('novaVrednostSelect').value;

var mv = document.getElementById('mojaVrednost').value;
var nv = document.getElementById('novaVrednost').value;
novaVrednost.value =  parseInt(mojaVrednost.value) * dict[nvs]
console.log("Yoooo"+  dict[nvs])
console.log("mvs je" + mvs);
console.log("nvs je" + nvs);
console.log("======");
console.log("mojaVrednost je" + mojaVrednost.value);
console.log("novaVrednost je" + novaVrednost.value);
}
document.getElementById('button').onclick = myFunction

check this fiddle

希望这对您有帮助