Question

我试图制作一个货币转换器，可以在变化时转换几种不同的货币。它使用一些预先确定的汇率。输入框显示，但没有一个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;
}

Answer 1

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

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中非常重要。

Answer 2

我知道这已经过时了，但我发现它并认为您可能想知道为什么即使在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>

Answer 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>

HTML / Javascript货币转换器

3 个答案: