title: Converting a Javascript energy calculator to jQuery
body: <p>I have written code for an energy calculator in Javascript but I am looking to write it in jQuery so I can have some cool effects like show / hide, etc.</p>
  
  <p>Here is the original Javascript code.</p>
  
  <pre><code>function validateForm(){
    hours_used = document.getElementById('hours').value;
    //validation
    if(hours_used &lt; 1 || isNaN(hours_used) || hours_used == ""){
      alert('Please enter a valid number for hours used per day');
      document.getElementById('hours').value = " ";
      document.getElementById('hours').focus();
      return false;
    }else if (hours_used &gt; 24){
      alert('There is only 24 hours in a day');
      document.getElementById('hours').value = " ";
      document.getElementById('hours').focus();
      return false;
    }else{
      return getEnergyCosts();
    }
  } //end validateForm function
  //getEnergyCosts function
  //calculates energy costs for appliance
  //based on hours used per day
  function getEnergyCosts(){
    watts = document.getElementById('appliance').value;
    hours_used = document.getElementById('hours').value;
    //cost per kilowatt divide by 100 to get pence figure
    var cpk = 14.5/100;
    //divide watts by 1000 to get kw
    var kilowatt = watts / 1000;
    kw_used = hours_used * kilowatt;
    //calculate costs
    cost_per_day = kw_used * cpk;
    cost_per_week = cost_per_day * 7;
    cost_per_month = cost_per_week * 4;
    cost_per_year = cost_per_month * 12;
    document.getElementById('kilowatts_used').innerHTML = kw_used.toFixed(2);
    document.getElementById('cost_day').innerHTML = "£"+cost_per_day.toFixed(2)+"p";
    document.getElementById('cost_week').innerHTML = "£"+cost_per_week.toFixed(2)+"p";
    document.getElementById('cost_month').innerHTML = "£"+cost_per_month.toFixed(2)+"p";
    document.getElementById('cost_year').innerHTML = "£"+cost_per_year.toFixed(2)+"p";
    //return false to stop form reloading
    return false;
  }
  function reset_form(){
    //resets variables when reset button is clicked
    //possibly don't need this
    watts = 0;
    kw_used = 0;
    cost_per_day = 0;
    cost_per_week = 0;
    cost_per_month = 0;
    cost_per_year = 0;
    document.getElementById('kilowatts_used').innerHTML = "";
    document.getElementById('cost_day').innerHTML = "";
    document.getElementById('cost_week').innerHTML = "";
    document.getElementById('cost_month').innerHTML = "";
    document.getElementById('cost_year').innerHTML = "";
  }
  </code></pre>
  
  <p>Here's what I have so far in jQuery, unfortunately, I'm not too familiar with creating functions (or plugins as this basically will be a plugin) in jQuery, so it does not work as it should. The form validation part seems to work, i.e. if I leave the hours text box black or don't input a number, it returns the alert box but the <code>getEnergyCosts</code> function does not work as it should. The div which wraps around the results will not show and the form refreshes with the value of the selected item in the URL. Basically I don't think the <code>getEnergyCosts</code> function is being run.</p>
  
  <p>The only error I seem to be getting is a reference error invalid left-hand side at this line:</p>
  
  <pre><code>   $('#kilowatts_used').html() = kw_used.toFixed(2);
  </code></pre>
  
  <p>Can anyone give me some tips as to what I am doing wrong? Thanks.</p>
  
  <pre><code>jQuery.fn.validateForm = function() {
    var hours_used = parseInt($('#hours').val());
    //validation
    if(hours_used &lt; 1 || isNaN(hours_used) || hours_used == ""){
      alert('Please enter a valid number for hours used per day');
      document.getElementById('hours').value = " ";
      document.getElementById('hours').focus();
      return false;
    }else if (hours_used &gt; 24){
      alert('There is only 24 hours in a day');
      document.getElementById('hours').value = " ";
      document.getElementById('hours').focus();
    }else{
      return $(this).getEnergyCosts();
    }
  } //end validateForm function
  //getEnergyCosts function
  //calculates energy costs for appliance
  //based on hours used per day
  jQuery.fn.getEnergyCosts = function() {
    var watts = parseInt($('#appliance').val());
    var hours_used = parseInt($('#hours').val());
    //cost per kilowatt divide by 100 to get pence figure
    var cpk = 14.5/100;
    //divide watts by 1000 to get kw
    var kilowatt = watts / 1000;
    kw_used = hours_used * kilowatt;
    //calculate costs
    cost_per_day = kw_used * cpk;
    cost_per_week = cost_per_day * 7;
    cost_per_month = cost_per_week * 4;
    cost_per_year = cost_per_month * 12;
    $('#kilowatts_used').html() = kw_used.toFixed(2);
    $('#cost_day').html() = "£"+cost_per_day.toFixed(2)+"p";
    $('#cost_week').html() = "£"+cost_per_week.toFixed(2)+"p";
    $('#cost_month').html() = "£"+cost_per_month.toFixed(2)+"p";
    $('#cost_year').html() = "£"+cost_per_year.toFixed(2)+"p";
    //return false to stop from reloading
    $('#results').show(fast);
  }
  jQuery.fn.reset_form = function() {
    //resets variables when reset button is clicked
    //possibly don't need this
    watts = 0;
    kw_used = 0;
    cost_per_day = 0;
    cost_per_week = 0;
    cost_per_month = 0;
    cost_per_year = 0;
    document.getElementById('kilowatts_used').innerHTML = "";
    document.getElementById('cost_day').innerHTML = "";
    document.getElementById('cost_week').innerHTML = "";
    document.getElementById('cost_month').innerHTML = "";
    document.getElementById('cost_year').innerHTML = "";
  }
  </code></pre>
  
  <p>This is what I have in the HTML file to call the jQuery function:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function(){
      $('#results').hide();
      $('.submit').click(function(){
        $(this).validateForm();
        return false;
      });
      $('.reset').click(function(){
        reset_form();
        $('#results').hide();
      });
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>For reference this is the HTML code for the form:</p>
  
  <pre><code>&lt;div id="energy-calculator"&gt;
    &lt;form id="e-calc"&gt;
      &lt;div class="element"&gt;
        &lt;label for="appliance"&gt;Select an appliance&lt;/label&gt;
        &lt;select name="appliance" id="appliance" tabindex="1"&gt;
          &lt;option value="2000"&gt;Oven&lt;/option&gt;
          &lt;option value="1100"&gt;Microwave&lt;/option&gt;
          &lt;option value="1500"&gt;Portable Heater&lt;/option&gt;
          &lt;option value="200"&gt;Desktop Computer&lt;/option&gt;
          &lt;option value="40"&gt;Laptop Computer&lt;/option&gt;
          &lt;option value="150"&gt;Games Consoles (PS3 / X Box)&lt;/option&gt;
          &lt;option value="16"&gt;Games Console (Wii)&lt;/option&gt;
          &lt;option value="70"&gt;Television 19 inch&lt;/option&gt;
          &lt;option value="150"&gt;Television 25 inch&lt;/option&gt;
          &lt;option value="450"&gt;Hoover&lt;/option&gt;
          &lt;option value="500"&gt;Fridge/Freezer&lt;/option&gt;
          &lt;option value="3500"&gt;Tumble Dryer&lt;/option&gt;
          &lt;option value="700"&gt;Washing Machine&lt;/option&gt;
          &lt;option value="1350"&gt;Dishwasher&lt;/option&gt;
          &lt;option value="11"&gt;Energy Saving Light Bulb&lt;/option&gt;
          &lt;option value="23"&gt;Digital TV Box&lt;/option&gt;
          &lt;option value="1000"&gt;Hair Dryer&lt;/option&gt;
          &lt;option value="123"&gt;Straighteners&lt;/option&gt;
          &lt;option value="35"&gt;Stereo System&lt;/option&gt;
          &lt;option value="35"&gt;DVD Player&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="element"&gt;
        &lt;label for="hours"&gt;How many hours on average do you use the appliance per day?&lt;/label&gt;
        &lt;input type="text" id="hours" tabindex="2" size="2"/&gt;
      &lt;/div&gt;
      &lt;div class="element"&gt;
        &lt;input type="submit" value="Get Costs" class="submit" tabindex="3"/&gt;
      &lt;/div&gt;
      &lt;!-- results --&gt;
      &lt;div id="results"&gt;
        &lt;div class="element"&gt;
          &lt;span class="label"&gt;Kilowatts used per day:&lt;/span&gt;
          &lt;div id="kilowatts_used" class="results_box"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="element"&gt;
          &lt;span class="label"&gt;Total cost per day is:&lt;/span&gt;
          &lt;div id="cost_day" class="results_box"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="element"&gt;
          &lt;span class="label"&gt;Total cost per week is:&lt;/span&gt;
          &lt;div id="cost_week" class="results_box"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="element"&gt;
          &lt;span class="label"&gt;Total cost per month is:&lt;/span&gt;
          &lt;div id="cost_month" class="results_box"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="element"&gt;
          &lt;span class="label"&gt;Total cost per year is:&lt;/span&gt;
          &lt;div id="cost_year" class="results_box"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="element"&gt;
          &lt;input type="reset" value="Reset Form" class="reset" /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>