HTML/Javascript 货币转换器答案

【问题标题】：HTML/Javascript Currency converterHTML/Javascript 货币转换器
【发布时间】：2013-11-15 11:09:42
【问题描述】：

我正在尝试制作一个货币转换器，可以在更改时在几种不同的货币之间进行转换。它使用一些预先确定的汇率。显示输入框，但似乎没有任何 javascript 工作。有什么帮助吗？

使用更新的代码进行编辑。仍然没有转换任何东西。

HTML 正文：

<body onload="init()">

    <input type="text" id="GBP" size="10" value="0" onchange="gbp()"/>
    <label for="GBP"> GBP </label>

    </br>

    <input type="text" id="USD" size="10" value="0" onchange="usd()" />
    <label for="USD"> USD </label>

    </br>

    <input type="text" id="EUR" size="10" value="0" onchange="eur()" />
    <label for="EUR"> EUR </label>

    </br>

    <input type="text" id="CAD" size="10" value="0" onchange="cad()" />
    <label for="CAD"> CAD </label>

    </br>

    <input type="text" id="AUD" size="10" value="0" onchange="aud()" />
    <label for="AUD"> AUD </label>



</body>

Javascript 代码：

var gbp, usd, eur, cad, aud;
function init()
{
    gbp = document.getElementById("GBP");
    usd = document.getElementById("USD");
    eur = document.getElementById("EUR");
    cad = document.getElementById("CAD");
    aud = document.getElementById("AUD");
}

function gbp()
{
    usd.value = parseFloat(gbp.value) * 0.49246;
    eur.value = parseFloat(gbp.value) * 0.69714;
    cad.value = parseFloat(gbp.value) * 0.50221;
    aud.value = parseFloat(gbp.value) * 0.43497;
}

function eur()
{
    gbp.value = parseFloat(eur.value) * 1.43448;
    usd.value = parseFloat(eur.value) * 0.70641;
    cad.value = parseFloat(eur.value) * 0.72037;
    aud.value = parseFloat(eur.value) * 0.62382;
}

function cad()
{
    gbp.value = parseFloat(cad.value) * 1.99169;
    usd.value = parseFloat(cad.value) * 0.98054;
    eur.value = parseFloat(cad.value) * 1.38814;
    aud.value = parseFloat(cad.value) * 0.86613;
}

function aud()
{
    gbp.value = parseFloat(aud.value) * 2.29964;
    usd.value = parseFloat(aud.value) * 1.13262;
    eur.value = parseFloat(aud.value) * 1.60329;
    cad.value = parseFloat(aud.value) * 0.88297;    
}

function usd()
{
    gbp.value = parseFloat(usd.value) * 2.03032;
    eur.value = parseFloat(usd.value) * 1.41544;
    cad.value = parseFloat(usd.value) * 1.01941;
    aud.value = parseFloat(usd.value) * 0.88297;
}

【问题讨论】：

具有硬编码汇率的货币转换器有什么用？可以使用 javascript 从众多不同的 API 获取实时数据
我同意这只是用于 uni 的一些 javascript 工作。

标签： javascript html currency

【解决方案1】：

我知道这是旧的，但我只是偶然发现它，并认为您可能想知道为什么即使在 antyrat 的（正确）建议之后您的代码仍然无法工作。

问题在于变量和函数名称之间的冲突。

有一些很好的文章解释了当您在异地执行此操作时实际发生的情况，such as here

简单修复：更改函数名称...

var gbp, usd, eur, cad, aud;
function init()
{
    gbp = document.getElementById("GBP");
    usd = document.getElementById("USD");
    eur = document.getElementById("EUR");
    cad = document.getElementById("CAD");
    aud = document.getElementById("AUD");
}

function gbpfunc()
{
    usd.value = parseFloat(gbp.value) * 0.49246;
    eur.value = parseFloat(gbp.value) * 0.69714;
    cad.value = parseFloat(gbp.value) * 0.50221;
    aud.value = parseFloat(gbp.value) * 0.43497;
}

function eurfunc()
{
    gbp.value = parseFloat(eur.value) * 1.43448;
    usd.value = parseFloat(eur.value) * 0.70641;
    cad.value = parseFloat(eur.value) * 0.72037;
    aud.value = parseFloat(eur.value) * 0.62382;
}

function cadfunc()
{
    gbp.value = parseFloat(cad.value) * 1.99169;
    usd.value = parseFloat(cad.value) * 0.98054;
    eur.value = parseFloat(cad.value) * 1.38814;
    aud.value = parseFloat(cad.value) * 0.86613;
}

function audfunc()
{
    gbp.value = parseFloat(aud.value) * 2.29964;
    usd.value = parseFloat(aud.value) * 1.13262;
    eur.value = parseFloat(aud.value) * 1.60329;
    cad.value = parseFloat(aud.value) * 0.88297;    
}

function usdfunc()
{
    gbp.value = parseFloat(usd.value) * 2.03032;
    eur.value = parseFloat(usd.value) * 1.41544;
    cad.value = parseFloat(usd.value) * 1.01941;
    aud.value = parseFloat(usd.value) * 0.88297;
}

init();

<input type="text" id="GBP" size="10" value="0" onchange="gbpfunc()"/>
    <label for="GBP"> GBP </label>

    </br>

    <input type="text" id="USD" size="10" value="0" onchange="usdfunc()" />
    <label for="USD"> USD </label>

    </br>

    <input type="text" id="EUR" size="10" value="0" onchange="eurfunc()" />
    <label for="EUR"> EUR </label>

    </br>

    <input type="text" id="CAD" size="10" value="0" onchange="cadfunc()" />
    <label for="CAD"> CAD </label>

    </br>

    <input type="text" id="AUD" size="10" value="0" onchange="audfunc()" />
    <label for="AUD"> AUD </label>

【讨论】：

【解决方案2】：

您需要从 initialize 函数中删除 var 语句并将它们添加到此函数上方：

var gbp, usd, eur, cad, aud;
function init()
{

    gbp = document.getElementById("GBP");
    usd = document.getElementById("USD");
    eur = document.getElementById("EUR");
    cad = document.getElementById("CAD");
    aud = document.getElementById("AUD");
    //...

在这种情况下，变量 gbp, usd, eur, cad, aud 将在其他函数范围内可见。

您可能需要阅读有关变量和范围的更多信息。例如MDN。范围和闭包在 JS 中非常重要。

【讨论】：

谢谢。现在，当我输入一个 GBP 值时，这有效，但不适用于其他任何值。
我想我只想为每种货币设置一个单独的函数，而不是尝试重用 calculate()
@BenMcAlindin 是的，这可能会更好

【解决方案3】：

我们可以委托并尽量保持 DRY 原则

const conv = { "gbp": { usd: 1.39, eur: 1.17, cad: 1.75, aud: 1.80 }, "eur": { gbp: 0.86, usd: 1.19, cad: 1.50, aud: 1.54 }, "cad": { gbp: 0.57, usd: 0.79, eur: 0.67, aud: 1.03 }, "aud": { gbp: 0.55, usd: 0.97, eur: 0.65, cad: 0.97 }, "usd": { gbp: 0.72, eur: 0.84, cad: 1.26, aud: 1.30 } };

const formatVal = num =>  {
  const dec = num % 1 ? 2 : 0; // https://twitter.com/wesbos/status/1369713969007575043
  return (num).toFixed(dec);
};
window.addEventListener("load", function() {
  const fs = document.getElementById("fs");
  const fields = [...fs.querySelectorAll("input")].reduce((acc, fld) => (acc[fld.id.toLowerCase()] = fld, acc), {})
  fs.addEventListener("input", function(e) {
    const tgt = e.target;
    const from = tgt.id.toLowerCase();
    let fromVal = +tgt.value;
    Object.entries(conv[from]).forEach(([key, val]) => fields[key].value = formatVal(val * fromVal));
  });
});

fieldset {
  width: 150px;
}

input[type=number] {
  text-align: right;
  width:80px;
}

<fieldset id="fs">
  <label><input type="number" id="GBP" value="0" autocomplete="off" /> GBP</label></br>
  <label><input type="number" id="USD" value="0" autocomplete="off" /> USD</label></br>
  <label><input type="number" id="EUR" value="0" autocomplete="off" /> EUR</label></br>
  <label><input type="number" id="CAD" value="0" autocomplete="off" /> CAD</label></br>
  <label><input type="number" id="AUD" value="0" autocomplete="off" /> AUD</label>
</fieldset>

【讨论】：