Update input number variable onclick

Question

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

Sushil · Accepted Answer · 2015-06-22 16:28:56Z

2

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

edited Jun 22, 2015 at 16:28

Sushil

2,8434 gold badges23 silver badges29 bronze badges

answered Jun 22, 2015 at 16:18

NightOwlPrgmr

1,3743 gold badges22 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

LukeD1uk Over a year ago

I was so close! :D Thank you

aphextwix · Accepted Answer · 2015-06-22 16:17:58Z

2

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;
};

answered Jun 22, 2015 at 16:17

aphextwix

1,8763 gold badges21 silver badges27 bronze badges

1 Comment

LukeD1uk Over a year ago

I was so close! :D Thank you

Magicprog.fr · Accepted Answer · 2015-06-22 16:28:10Z

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;
};

Collectives™ on Stack Overflow

Update input number variable onclick

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related