Question

I am developing a rate module, figuring out how much is spent for how many minutes they get with a calling card. For exaple, calling to South Africa costs 0.015 a minute. I would like to perform the following math:

SouthAfrica * minutes. Or in this case: 0.015*200 and get $3 as a result.

My question is: do I put the following value either in:

Code version 1:
HTML:

   <option value="0.015">South Africa</option>

JS:

   var inputCountries =$('#CountryName').val();
   var inputMinutes = $('#minutes').val();
   var result = parseInt(inputMinutes)*parseFloat(inputCountries);

Code version 2:
HTML:

    <option value="SouthAfrica">South Africa</option>

JS:

    var SouthAfrica = 0.015;
    var inputCountries =$('#CountryName').val();
    var inputMinutes = $('#minutes').val();
    var result = parseInt(inputMinutes)*parseFloat(inputCountries);

Code version 3:
HTML:

    <option value="SouthAfrica">South Africa</option>

JS:

    var inputCountries =$('#CountryName').val(
           SouthAfrica = 0.015;
      );
    var inputMinutes = $('#minutes').val();
    var result = parseInt(inputMinutes)*parseFloat(inputCountries);

This is my first JavaScript project, and learning as I go, so I would appreciate any sources to explaining why the above code works/doesn’t work. Here is the rest of my code for reference.

NOTE: Please do not correct the REST of my code, I am still researching and learning. However, any hints or resources to figure out the rest of the code would be very much appreciated. My focus of this topic is to the assigning value of each country. I have tried to figure out how to solve the problem using several different resources, but have come up empty. Thank you for your time!

HTML:

    <form name="calculator">
    <!--
    Countries
    -->
    <label><span><!--[Write as something else]-->Where do you want to call?</span>
    </label>

    <select id="CountryName" class="rates">
    <option>Select...</option>
    <option value=" ?? ">South Africa</option <!--This list is truncated to keep the post short-->
    </select>
    <label>Minutes to call</label>
    <input id="minutes" type="text" class="rates" /><br />

    <input type="button" name="submit" id="submit" value="Submit" />

    <input type="button" name="clear" id="clear" value="Clear" />
    <br />
    </form>
    <div id="RatesResult">
    <p>
    <span id="total"></span> for 
    <span id="afterMin"></span> minutes. <!--This section, #afterMin, is still being worked on, any hint/resources on how to print what user wrote in #minutes into this section would be appreciated -->

    </p><br />
    </div>
    </div>

JS:

       $(document).ready(function() {
    $('#submit').submit(function() {
 var total = 0;
     var SouthAfrica = 0.015, Canada = 0.015 ; //truncated list             
    var inputCountries =$('#CountryName').val();
var inputMinutes = $('#minutes').val();
var result = parseInt(inputMinutes)*parseFloat(inputCountries);
$('#total').html(formatCurrency(result));
        });
   });

Answer 1

The simplest answer, for you, is to create an object like this: (note that all objects in javascript are effectively hashmaps/dictionary<string,value> types.

var rates = {
  'SouthAfrica': 0.0015,
  'USA' : 0.0001,
  .....
  'France' : 0.0005
}

//HTML
<option value="SouthAfrica">South Africa</option>
<option value="USA">United States of America</option>

And then when you get the val from the select, like $('#CountryName').val(); you can do a lookup on the rates object, like so:

var countrySelected = $('#CountryName').val();
var rate = rates[countrySelected];