Reference select menu HTML in javascript

Question

I am brand new to html and fairly new to coding in general. I know this is basic but I find adapting someone elses code for my needs helps me learn much faster than just going through tutorials.

I want to create a currency exchange site. I would like to select a currency, enter the ammount, and see how much I would get in £ in return.

my code;

function Converter(){

  if (document.converter.currency.value = EUR)

    document.converter.pound.value = document.converter.ammount.value * 0.9


  if (document.converter.currency.value = USD)

    document.converter.pound.value = document.converter.ammount.value * 0.6
}

<form name="converter">
  <table border="0">
    <tr>
      <td>
        <select name = "currency">
        <option value="EUR" selected> Euro </option>
        <option value="USD">Dollar</option></select>
      </td>

      <td>
        <input type="text" name="ammount" onChange="Converter()" />
      </td>
    </tr>
    <tr>
     <td>£:</td>
     <td><input type="text" name="pound" disabled /></td>
    </tr>
  </table>
</form>

I would like to know if this is the right way to do this and mainly, how to refernce the select menu in javascript.

Thanks for your time!

score 0 · Answer 1 · answered Jul 23 '17 at 01:45

DEMO

function Converter(){

  if (document.converter.currency.value == 'EUR')

  document.converter.pound.value = document.converter.ammount.value * 0.9 ;


  if (document.converter.currency.value == 'USD')

  document.converter.pound.value = document.converter.ammount.value * 0.6 ;
}

<form name="converter">
  <table border="0">
    <tr>
      <td>
        <select name = "currency">
        <option value="EUR" selected> Euro </option>
        <option value="USD">Dollar</option></select>
      </td>

      <td>
        <input type="text" name="ammount" onkeyup="Converter()" />
      </td>
    </tr>
    <tr>
     <td>£:</td>
     <td><input type="text" name="pound" disabled /></td>
    </tr>
  </table>
</form>

There is an event onchange, which fired after a change in element and on focusout . You can use onkeyup/onkeydown to get result on key up.

And in your script part you are assigning value . Check

score 0 · Answer 2 · answered Jul 23 '17 at 01:55

<script language="JavaScript">

function Converter(){

if (document.converter.currency.value = "EUR") //fix here

document.converter.pound.value = document.converter.ammount.value * 0.9


if (document.converter.currency.value = "USD") // also fix here

document.converter.pound.value = document.converter.ammount.value * 0.6
}
</script>

You were missing some much needed quotes, fix those. And for the DOM related part, this thread might help.

Dan Kreiger · Answer 3 · 2017-07-23T19:26:47.133

Are you against using JQuery? You could actually use AJAX to fetch up-to-date rates from a service like fixer.io. This will make sure your conversion rates remain accurate.

The syntax for doing all of this is considerably simpler in JQuery, but it can be done in vanilla JavaScript.

$(document).ready(function() {
  // update on input
  $("#amount").on("input", function() {
    var currency = $("#converter option:selected").val();
    convertCurrency(currency);
  });

  // update on select menu change
  $("#converter").change(function() {
    convertCurrency($(this).val());
  });
});

// convert currency using live rates from fixer.io
function convertCurrency(currency){
  var amount = $("#amount").val();
  $.get("https://api.fixer.io/latest?base=GBP", function(data) {
    var baseExchange = (amount / data.rates[currency]).toFixed(2);
    var commission = (baseExchange * 0.1).toFixed(2);
    // calculations
    $("#gbpBase").html(baseExchange);
    $("#commission").html(commission);
    $("#gbpTotal").html((baseExchange - commission).toFixed(2));
  });
}

#results-table {
  display: flex;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class='container jumbotron' style='padding-top: 0.5rem;'>
  <h4>Convert to GBP (£)</h4>
  <hr/>
  <table class='table table-striped'>
    <thead>
      <th>Currency</th>
      <th>Amount</th>
    </thead>
    <tbody>
      <tr>
        <td>
          <select class='form-control' name="currency" id="converter">
            <option value="EUR" selected>Euro (€)</option>
            <option value="USD">US Dollar ($)</option>            
          </select>
        </td>
        <td>
          <input class='form-control' type="text" name="amount" placeholder='Enter amount' id="amount" />
        </td>
      </tr>
    </tbody>
  </table>

  <table class="table" id="results-table">
    <tbody>
      <tr>
        <th>Base Exchange</th>
        <td>&nbsp;&nbsp;&nbsp;£: <span id="gbpBase">0.00</span></td>
      </tr>
      <tr>
        <th>Commission (10%)</th>
        <td>- £: <span id='commission'>0.00</span></td>
      </tr>
      <tr>
        <th>Exchange Amount</th>
        <td><strong>&nbsp;&nbsp;&nbsp;£: <span id="gbpTotal">0.00</span></strong></td>
      </tr>
    </tbody>
  </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Updated CodePen Demo

Thanks for your answer! Really appreciate it!! This is awesome although is it possible to add a set markup to the market rate ( for instance market rate +10% comission). Seems a little out my coding league, but ill have a play about with it and see if i can do it myself! — Abra, Jul 23 '17 at 17:41
Do you subtract the 10% commission from the exchange amount? I'm not familiar with the foreign exchange business, but I added an updated [link](https://codepen.io/dankreiger5/pen/OjJPdw). It does "(converted amount) - (10% of the converted amount)" ... I hope it helps — Dan Kreiger, Jul 23 '17 at 18:55
When converting money, a higher rate is worse for the base currency being returned (its being divided by a bigger number). What you have done is essentially the same thing, though, just more explicitly. Thank you so much for your time! — Abra, Jul 23 '17 at 19:25

Reference select menu HTML in javascript

3 Answers3