CODEWITHSUNDEEP
javascriptjqueryhtmlfunction
LukeD1uk
LukeD1uk

Reputation: 242

Update input number variable onclick

I am trying to create a calculator style thing, where you put in how many years into a input, you hit submit and it gives you different results below without reloading the page.

I have all the calculations working right now, but I just cant get the input number variable to update when the submit button is clicked, and then print the correct results on the page. I have been googling for an hour and I cant seem to get it right, Im learning JS still.

Here is my JS: 

// Get Years
var years = (document.getElementById('years').value);
// Variables
var years;
var gallons = 1100 * 365;
var grain = 45 * 365;
var forest = 30 * 365;
var co2 = 20 * 365;
var animal = 1 * 365;
// Calculations
var gallonsTotal = years * gallons;
var grainTotal = years * grain;
var forestTotal = years * forest;
var co2Total = years * co2;
var animalTotal = years * animal;
// Functions
function calc() {
    var years = (document.getElementById('years').value);
    //Prints
    document.querySelector('.gallons').innerHTML = "Gallons " + gallonsTotal;
    document.querySelector('.grain').innerHTML = "Gains " + grainTotal;
    document.querySelector('.forest').innerHTML = "Forest " + forestTotal;
    document.querySelector('.co2').innerHTML = "Co2 " + co2Total;
    document.querySelector('.animals').innerHTML = "Animals " + animalTotal;
};

HTML: 

<div class="small-4 columns">
    <input type="number" id="years" min="1" max="99">
</div>
<div class="small-8 columns">
    <a href="#" class="button postfix submit" onclick="calc()">Submit</a>
</div>

Here is a pen of my current progress: http://codepen.io/LukeD1uk/pen/BNwXMX

Upvotes: 1

Views: 410

Answers (3)

NightOwlPrgmr
NightOwlPrgmr

Reputation: 1374

You need to put all the calculations into the calc() function:

function calc() {
    // Get Years
    var years = (document.getElementById('years').value);
    // Variables
    var years;
    var gallons = 1100 * 365;
    var grain = 45 * 365;
    var forest = 30 * 365;
    var co2 = 20 * 365;
    var animal = 1 * 365;
    // Calculations
    var gallonsTotal = years * gallons;
    var grainTotal = years * grain;
    var forestTotal = years * forest;
    var co2Total = years * co2;
    var animalTotal = years * animal;
    // Functions

    var years = (document.getElementById('years').value);
    //Prints
    document.querySelector('.gallons').innerHTML = "Gallons " + gallonsTotal;
    document.querySelector('.grain').innerHTML = "Gains " + grainTotal;
    document.querySelector('.forest').innerHTML = "Forest " + forestTotal;
    document.querySelector('.co2').innerHTML = "Co2 " + co2Total;
    document.querySelector('.animals').innerHTML = "Animals " + animalTotal;
};

Code Pen

Upvotes: 2

Magicprog.fr
Magicprog.fr

Reputation: 4100

1) Move calculation inside your function

2) In your codepen, think about closing your <p class="gallons"><p> tags instead of <p class="gallons"<p>

CodePen: http://codepen.io/anon/pen/VLMooV

// Variables
var gallons = 1100 * 365;
var grain = 45 * 365;
var forest = 30 * 365;
var co2 = 20 * 365;
var animal = 1 * 365;

// Functions
function calc(){
  // Calculations
  var gallonsTotal =  years * gallons;
  var grainTotal =  years * grain;
  var forestTotal =  years * forest;
  var co2Total =  years * co2;
  var animalTotal =  years * animal;

  var years = (document.getElementById('years').value);
  //Prints
  document.querySelector('.gallons').innerHTML = "Gallons " + gallonsTotal;
  document.querySelector('.grain').innerHTML = "Gains " + grainTotal;
  document.querySelector('.forest').innerHTML = "Forest " + forestTotal;
  document.querySelector('.co2').innerHTML = "Co2 " + co2Total;
  document.querySelector('.animals').innerHTML = "Animals " + animalTotal;
};

Upvotes: 0

aphextwix
aphextwix

Reputation: 1858

You're defining the variables that you require outside of the function scope, the solution is to define them within the calc() function : -

// Functions
function calc(){
    // Get Years
   var years = (document.getElementById('years').value);
   // Variables
   var years;
   var gallons = 1100 * 365;
   var grain = 45 * 365;
   var forest = 30 * 365;
   var co2 = 20 * 365;
   var animal = 1 * 365;
   // Calculations
   var gallonsTotal =  years * gallons;
   var grainTotal =  years * grain;
   var forestTotal =  years * forest;
   var co2Total =  years * co2;
   var animalTotal =  years * animal;
   //Prints
   document.querySelector('.gallons').innerHTML = "Gallons " + gallonsTotal;
   document.querySelector('.grain').innerHTML = "Gains " + grainTotal;
   document.querySelector('.forest').innerHTML = "Forest " + forestTotal;
   document.querySelector('.co2').innerHTML = "Co2 " + co2Total;
   document.querySelector('.animals').innerHTML = "Animals " + animalTotal;
};

Upvotes: 2

Related Questions