HTML/Javascript 货币转换器

Question

I'm trying to make a currency converter that converts between several different currencies on change.我正在尝试制作一个货币转换器，可以在更改时在几种不同的货币之间进行转换。 It uses some pre-determined exchange rates.它使用一些预先确定的汇率。 Input boxes display, but none of the javascript seems to work.输入框显示，但 javascript 似乎都不起作用。 Any help?有什么帮助吗？

Edited with updated code.使用更新的代码进行编辑。 Still does not convert anything.仍然没有转换任何东西。

HTML body: 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 code: 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

I know this is old but I just happend upon it and thought you might like to know why your code still doesn't work even after antyrat's (correct) suggestion.我知道这是旧的，但我只是偶然发现它，并认为您可能想知道为什么即使在 antyrat 的（正确）建议之后您的代码仍然无法工作。

The issue lies with the clash between your variables and functions names.问题在于变量名和函数名之间的冲突。

There are some good articles explaining what actually happens when you do this offsite, such as here有一些很好的文章解释了当您在异地执行此操作时实际发生的情况，例如这里

Simple fix: change your function names...简单的修复：更改您的函数名称...

 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 2

You need to remove var statements from initialize function and add them above this function:您需要从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");
    //...

In this case variables gbp, usd, eur, cad, aud will be visible in other functions scopes.在这种情况下，变量gbp, usd, eur, cad, aud将在其他函数作用域中可见。

Probably you need to read more about variables and scopes.可能你需要阅读更多关于变量和作用域的内容。 For example at MDN .例如在MDN 。 Scopes and closures are very important in JS.作用域和闭包在 JS 中非常重要。

Answer 3

We can delegate and try to keep the DRY principle我们可以委派并尽量保持 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 个解决方案

解决方案1
6 2015-02-11 21:22:42

解决方案2
3 已采纳 2013-11-04 18:21:48

解决方案3
0 2021-03-09 14:01:37

HTML/Javascript 货币转换器

问题描述

3 个解决方案

解决方案1 6 2015-02-11 21:22:42

解决方案2 3 已采纳 2013-11-04 18:21:48

解决方案3 0 2021-03-09 14:01:37

解决方案1
6 2015-02-11 21:22:42

解决方案2
3 已采纳 2013-11-04 18:21:48

解决方案3
0 2021-03-09 14:01:37