logo标签列表

HTML/Javascript货币转换器

javascripthtmlcurrency
3
我正在尝试创建一个货币转换器，可以在更改时在不同的货币之间进行转换。它使用一些预先确定的汇率。输入框会显示出来，但是没有任何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获取实时数据。 - charlietfl
我同意，这只是为了大学的一些JavaScript工作。 - Ben McAlindin
3个回答
6

我知道这已经很老了，但我刚刚碰巧发现它，并认为你可能想知道即使在 antyrat（正确的）建议之后，为什么你的代码仍然无法工作。

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

有一些好的文章解释了当你在外部执行此操作时实际发生了什么，例如这里

简单修复方法：更改您的函数名称...

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>

3
您需要将 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中非常重要。
谢谢。现在当我输入英镑的值时，它可以工作，但对于其他货币不起作用。 - Ben McAlindin
我认为我应该为每种货币编写单独的函数，而不是尝试重复使用calculate()函数。 - Ben McAlindin
@BenMcAlindin 是的，这可能会更好。 - antyrat
0

我们可以委托并尝试遵循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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接