How to make Javascript write price based on input?

Question

Here is a fiddle, so you can see what I'm talking about.

Basically this is a price checker, and I need to use Javascript in order to display some values.

So you can see I have the div .offer where I have an offer with a call to action. When the user loads the page, the div will display “Please select a country”

After pressing the “check prices” a paragraph will be displayed with a price and the yellow button under it. So, my question is, how do I do this? How can I create a script that checks both values ,“to” and “from” in order to display the appropriate price? For example, if he chooses from Germany to United States, it should display $0.02/minute. If he choose from Spain to Italy, it should display $0.05/minute etc. I hope you get the idea.

Thanks in advance :)

<div class="offer">
  <p>Our special offer for you is:</p>
  <p id="big-offer">Only $0.01/min</p>
  <button type="submit" class="btn btn-default btn-lg" id="big-cta">Strong Call to Action!</button>
</div>

Answer 1

Ok guys, here is how I did it:

function getPricing() {
    var e = document.getElementById("from");
    var fromCountry = e.options[e.selectedIndex].text;
    var f = document.getElementById("to");
    var toCountry = f.options[f.selectedIndex].text;
    var g = fromCountry + toCountry;
    var price = 0;
      
    if (g === "GermanyRomania") {price = 0.25;};
    if (g === "GermanyBulgaria") {price = 0.19;};
    if (g === "GermanyItaly") {price = 0.32;};
    if (g === "FranceRomania") {price = 0.98;};
    if (g === "FranceBulgaria") {price = 0.11;};
    if (g === "FranceItaly") {price = 0.25;};
    if (g === "SpainRomania") {price = 0.19;};
    if (g === "SpainBulgaria") {price = 0.39;};
    if (g === "SpainItaly") {price = 0.12;};

    
    if (fromCountry != "From Country" && toCountry != "To Country") {
        document.getElementById("wholeoffer").innerHTML ='<p>Our special offer for you is:</p><p id="big-offer">Only $<span id="hahaha">0.09</span>/min</p><button type="submit" class="btn btn-default btn-lg" id="big-cta">Strong Call to Action!</button>';
            
   document.getElementById("hahaha").innerHTML = price;
         
        
        
        
    }
    else {
    document.getElementById("wholeoffer").innerHTML ="<p>Please keep in mind that you have to choose both countries in order to work</p><button type='submit' class='btn btn-default btn-lg' id='invalid'>Get more details</button>   ";
    }

    
 
}

Answer 2

I built something similar a while back for a client, it's ugly as hell and could definitely be a lot more DRY, but it works. My quote generator takes three parameters: services, bedrooms and furnishings and returns a value. You should be able to tweak this to suit your needs. If you'd like to see it working you can check it out here. This is a singleton:

var quoteMaker = {
        data : {
            'services':null,
            'bedrooms':null,
            'furnishing':null,
            'quoteString':''
        },
        servicesListener : function(){
           this.data.services = document.getElementById('service').options[document.getElementById('service').selectedIndex].text;
        },
        bedroomsListener : function(){
           this.data.bedrooms = document.getElementById('bedrooms').options[document.getElementById('bedrooms').selectedIndex].text;
        },
        furnishingListener : function(){
           this.data.furnishing = document.getElementById('furnishing').options[document.getElementById('furnishing').selectedIndex].text;
        },
        changeData : function(divObj){
            this.data.quoteString='';
            if( divObj.id == 'service' ){
                this.servicesListener();
            }else if( divObj.id == 'bedrooms' ){
                this.bedroomsListener();
            }else if( divObj.id == 'furnishing' ){
                this.furnishingListener();
            }
            this.updateQuote();
        },
    updateQuote : function() {
      if (this.data.services == "Inventory" &&this.data.bedrooms =="1" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "= £70"; 
      if (this.data.services == "Inventory" &&this.data.bedrooms =="2" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "= £75";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="3" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "= £80";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="4" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "= £85";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="5" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "= £90";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="6+" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "= £100";

      if (this.data.services == "Inventory" &&this.data.bedrooms =="1" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "= £60"; 
      if (this.data.services == "Inventory" &&this.data.bedrooms =="2" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "= £65";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="3" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "= £70";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="4" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "= £75";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="5" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "= £80";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="6+" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "= £85";

      if (this.data.services == "Inventory" &&this.data.bedrooms =="1" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "= £55"; 
      if (this.data.services == "Inventory" &&this.data.bedrooms =="2" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "= £60";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="3" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "= £65";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="4" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "= £70";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="5" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "= £75";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="6+" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "= £80";


      if (this.data.services == "Check-In" &&this.data.bedrooms =="1" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "= £50"; 
      if (this.data.services == "Check-In" &&this.data.bedrooms =="2" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "= £55";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="3" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "= £60";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="4" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "= £65";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="5" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "= £70";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="6+" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "= £75";

      if (this.data.services == "Check-In" &&this.data.bedrooms =="1" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "= £40"; 
      if (this.data.services == "Check-In" &&this.data.bedrooms =="2" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "= £45";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="3" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "= £50";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="4" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "= £55";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="5" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "= £60";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="6+" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "= £65";

      if (this.data.services == "Check-In" &&this.data.bedrooms =="1" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "= £35"; 
      if (this.data.services == "Check-In" &&this.data.bedrooms =="2" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "= £40";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="3" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "= £45";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="4" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "= £50";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="5" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "= £55";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="6+" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "= £60";


      if (this.data.services == "Check-Out" &&this.data.bedrooms =="1" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "= £55"; 
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="2" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "= £60";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="3" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "= £65";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="4" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "= £70";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="5" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "= £75";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="6+" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "= £80";

      if (this.data.services == "Check-Out" &&this.data.bedrooms =="1" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "= £45"; 
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="2" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "= £50";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="3" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "= £55";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="4" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "= £60";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="5" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "= £65";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="6+" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "= £70";

      if (this.data.services == "Check-Out" &&this.data.bedrooms =="1" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "= £40"; 
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="2" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "= £45";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="3" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "= £50";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="4" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "= £55";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="5" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "= £60";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="6+" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "= £65";
    document.getElementById("quote").innerHTML=this.data.quoteString;
  },
  init: function(){}   
}
quoteMaker.init();