输入框中的简单值赋值返回NaN

Question

我刚刚将输入框的值分配给变量，现在当我想从输入框中查看变量的值时，它只显示我，Nan。

var cardamnt = parseFloat(document.getElementById("cardam").value);
var cashamnt = parseFloat(document.getElementById("casham").value);
var giftamnt = parseFloat(document.getElementById("giftcheck").value);
var amnt = parseFloat(document.getElementById("amounttxt").value);
document.getElementById("casham").onchange = function() {
alert(cashamnt);
};

<div class="container">
<h1>Payment Details</h1>
<h3>Amount</h3>
<input type="text" id="amounttxt">
<h3>Payment Type</h3>
<input type="radio" name="radAnswer" id="cashbtn">
<label for="cash">Cash</label><br>
<input type="radio" name="radAnswer" id="cardbtn">
<label for="card">Card</label><br>
<input type="radio" name="radAnswer" id="cashwcardbtn">
<label for="cashwcard">Cash and Card</label></body><br>
<h3>Gift Check</h3>
<input type="text" id="giftcheck">
<h3>Cash Amount</h3>
<input type="text" id="casham">
<h3>Card Amount</h3>
<input type="text" id="cardam"></br>
<button id="sumbitbtn">Submit</button>
</div>

Answer 1

只需获取声明并将其推送到onChange中，即可在JS执行时读取值。

var cashamnt = parseFloat(document.getElementById("casham").value);

在onChange中移动这一行，它将按预期工作。

var cardamnt = parseFloat(document.getElementById("cardam").value);
var giftamnt = parseFloat(document.getElementById("giftcheck").value);
var amnt = parseFloat(document.getElementById("amounttxt").value);
document.getElementById("casham").onchange = function() {
var cashamnt = parseFloat(document.getElementById("casham").value);
alert(cashamnt);
};

<div class="container">
<h1>Payment Details</h1>
<h3>Amount</h3>
<input type="text" id="amounttxt">
<h3>Payment Type</h3>
<input type="radio" name="radAnswer" id="cashbtn">
<label for="cash">Cash</label><br>
<input type="radio" name="radAnswer" id="cardbtn">
<label for="card">Card</label><br>
<input type="radio" name="radAnswer" id="cashwcardbtn">
<label for="cashwcard">Cash and Card</label></body><br>
<h3>Gift Check</h3>
<input type="text" id="giftcheck">
<h3>Cash Amount</h3>
<input type="text" id="casham">
<h3>Card Amount</h3>
<input type="text" id="cardam"></br>
<button id="sumbitbtn">Submit</button>
</div>