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. Any help?

Edited with updated code. Still does not convert anything.

HTML body:

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

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;
}
有帮助吗?

解决方案 2

You need to remove var statements from initialize function and add them above this function:

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.

Probably you need to read more about variables and scopes. For example at MDN. Scopes and closures are very important in JS.

其他提示

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.

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>  

We can delegate and try to keep the DRY principle

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>

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top