更新输入数字变量onclick

Question

我正在尝试创建一个calculator风格的东西，你在输入中输入多少年，点击提交，它会在不重新加载页面的情况下给你不同的结果。

我现在已经完成了所有的计算，但我无法在单击提交按钮时更新输入的数字变量，然后在页面上打印正确的结果。我已经在谷歌上搜索了一个小时，但我似乎没有把它做好，我还在学习JS。

这是我的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>

这是我目前的进展：http://codepen.io/LukeD1uk/pen/BNwXMX

Answer 1

您需要将所有计算放入calc()函数：

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

Answer 2

您在函数范围之外定义所需的变量，解决方案是在calc()函数中定义它们：-

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

Answer 3

1）在函数中移动计算

2） 在代码笔中，考虑关闭<p class="gallons"><p>标签而不是<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;
};