Converting currencies using JAVASCRIPT. can't set the value of converted input text field through my function

Question

I am trying to make a currency converter using html and javascript (without jquery) . I have tried a lot of things but I can't set the value of the text field to the converted amount. What is going wrong with my code?

So what I am trying to do is basically check what currency my initial amount is, based on that call the right function to do the calculations and then set the value of the input field with id="cur2" to the result of those calculations. I have tried to do that with the following javascript code . I am only giving you the function for euro to other currencies (the rest work similarly):

 window.onload = function() { document.getElementById("btnConvert").addEventListener("click", convert); } function convert() { var select = document.getElementById("currency1"); var curr = select.options[select.selectedIndex].value; var val = document.getElementById("cur2").value; if (curr == "EUR") { val = EURtoOther(); } if (curr == "USD") { val = USDtoOther(); } if (curr == "GBP") { val = GBPtoOther(); } if (curr == "AUD") { val = AUDtoOther(); } if (curr == "JPY") { val = JPYtoOther(); } } function EURtoOther() { var select = document.getElementById("currency2"); var curr = select.options[select.selectedIndex].value; var initval = document.getElementById("cur1").value; if (curr == "EUR") { return initval * 1.0; } if (curr == "USD") { return initval * 1.13; } if (curr == "GBP") { return initval * 0.79; } if (curr == "AUD") { return initval * 1.55; } if (curr == "JPY") { return initval * 123.27; } } 

  <select id="currency1"> <option value="EUR">Euro</option> <option value="USD">US Dollar</option> <option value="GBP">British Pound</option> <option value="AUD">Australian Dollar</option> <option value="JPY">Japanese Yen</option> </select> <input type="number" id="cur1"> <button id="btnConvert">Convert</button> <select id="currency2"> <option value="EUR">Euro</option> <option value="USD">US Dollar</option> <option value="GBP">British Pound</option> <option value="AUD">Australian Dollar</option> <option value="JPY">Japanese Yen</option> </select> <input type="text" id="cur2"> 

Not working and I don't know why. Thanks in advance.

Answer 1

You have to do document.getElementById().value = val; . val is not reffering to that element, it is just a value so you need to set it after.

https://jsfiddle.net/stevenkaspar/aphxcpcs/

Answer 2

You are not setting the value of second textbox. Use

document.getElementById("cur2").value = val;

to set the value of second textbox

 window.onload = function() { document.getElementById("btnConvert").addEventListener("click", convert); } function convert() { var select = document.getElementById("currency1"); var curr = select.options[select.selectedIndex].value; var val = document.getElementById("cur2").value; if (curr == "EUR") { val = EURtoOther(); } if (curr == "USD") { // val = USDtoOther(); } if (curr == "GBP") { // val = GBPtoOther(); } if (curr == "AUD") { // val = AUDtoOther(); } if (curr == "JPY") { // val = JPYtoOther(); } document.getElementById("cur2").value = val; } function EURtoOther() { var select = document.getElementById("currency2"); var curr = select.options[select.selectedIndex].value; var initval = document.getElementById("cur1").value; if (curr == "EUR") { return initval * 1.0; } if (curr == "USD") { return initval * 1.13; } if (curr == "GBP") { return initval * 0.79; } if (curr == "AUD") { return initval * 1.55; } if (curr == "JPY") { return initval * 123.27; } } 

 <select id="currency1"> <option value="EUR">Euro</option> <option value="USD">US Dollar</option> <option value="GBP">British Pound</option> <option value="AUD">Australian Dollar</option> <option value="JPY">Japanese Yen</option> </select> <input type="number" id="cur1"> <button id="btnConvert">Convert</button> <select id="currency2"> <option value="EUR">Euro</option> <option value="USD">US Dollar</option> <option value="GBP">British Pound</option> <option value="AUD">Australian Dollar</option> <option value="JPY">Japanese Yen</option> </select> <input type="text" id="cur2">