javascript - 更新输入数字变量 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