document.getElementById().value 的值为空

Question

编辑：它现在正在工作。我必须在函数中获取值。

我正在尝试制作一个计算器，它接受用户的输入、计算，然后使用 javascript 在 table 中显示结果。控制台告诉我，即使在单击计算按钮并调用 calculate() 函数后，这 3 个用户值仍为空。函数内的控制台日志告诉我它正在被调用，但所有值仍然为空。我得到的 html 是：

<!DOCTYPE html>
<html>
    <head>
        <title>Return on Investment Calculator</title>
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    </head>
    <body>
        <header class="w3-container w3-center w3-blue-grey">
            <h1>Return on Investment</h1>
        </header>
        <br>
        <div class="w3-container w3-card-4 w3-sand">
            <label>Initial Capital</label><br>
            <input class="w3-border" type="text" style="width: 100%; height: 36px;" id="initCapital"><br>
            <label>Annual Return Percentage (Eg. enter 8.52 for 8.52%)</label><br>
            <input class="w3-border" type="text" style="width: 100%; height: 36px;" id="arp"><br>
            <label>Number of years</label><br>
            <input class="w3-border" type="text" style="width: 100%; height: 36px;" id="years"><br>
            <button class="w3-button w3-teal" id="button" onclick="calculate()">Calculate</button>
        </div>
        <br>
        <div class="w3-container">
            <table class="w3-table w3-striped">
                <tr class="w3-blue-grey">
                    <th>Year</th>
                    <th>Return</th>
                    <th>End Value</th>
                    <th>Total Return Percentage</th>
                </tr>
                <div id="outputTable">
                
                </div>
            </table>
        </div>
        <script src="script.js"></script>
    </body>
    
</html>

我 javascript 得到的是：

var initialCapital = document.getElementById("initCapital").value;
console.log(initialCapital);
var arp = document.getElementById("arp").value;
console.log(arp);
var numYears = document.getElementById("years").value;
console.log(numYears);

var year = [];
var annualReturn = [];
var endValue = [];
var totalReturnPercentage = [arp];

function calculate(){
    console.log("Function is Working");
    for(var i = 0; i < numYears-1; i++){
        year.push(i);
        console.log(year[i]);
    }
    
}
console.log(year);

Answer 1

The console tells me that the 3 user values are null

控制台应该告诉你它们是空字符串。

even after clicking the calculate button and calling the calculate() function.

您没有查看该函数内部的输入值。

您查看在加载页面时（当它们是空字符串时）您对值所做的副本。

如果您想在 calculate 函数执行时读取值，那么您需要在函数中读取它们。

document.getElementById().value 的值为空

The values for document.getElementById().value are null

html

javascript

getelementbyid

console.log