javascript - 减去两个 HTML 字段并尽快显示结果 JavaScript

Question

我对 JS 不是很有经验。我在 HTML 中有两个输入字段，其中第一个用户输入提取金额，数据进入 JavaScript，它减去 0.00200000 并将其显示在第二个 HTML 输入字段(只读字段)中:-HTML:-

function calculate() {
		var myBox1 = document.getElementById('ant').value;	
		var myBox2 = 0.00200000;
		var result = document.getElementById('bank').value;	
		var numb = myBox1 - myBox2;
		numb = numb.toFixed(8);
		result.value = numb;
}

      <div class="wrap-input100 validate-input">
						<p>Amount</p><input class="input100" type="text" name="amount" id="ant" placeholder="Amount to Send" oninput="calculate()">
						<span class="focus-input100"></span>
						<span class="symbol-input100">
						</span>
					</div>
                        <span class="login100-form-title">
					Tx Fee:-0.00200000 LiteCoin (LTC)
					</span>
                    <br>Your receive: - <input class="input100" type="text" id="bank" placeholder="Amount you receive" oninput="calculate()" readonly>
					<input type="submit" name="submit" value="Withdraw">

当我在页面的第一个输入字段中输入值时，第二个字段从未获得任何值

Answer 1

一个小错误:

var result = document.getElementById('bank').value;

需要

var result = document.getElementById('bank');

result 需要代表元素本身，而不是它的值。否则您无法更改其值。

严格来说，你还应该使用 parseFloat() 来避免 JS 认为你的“ant”文本框的值是一个字符串并将其视为字符串。幸运的是，在这种情况下，您针对的是固定值，但如果您尝试减去两个文本框值(两个字符串)，就会遇到更大的问题。

“bank”元素中的 oninput="calculate()" 也是多余的。由于该字段是只读的，因此永远不会有任何用户输入来触发该功能。

function calculate() {
  var myBox1 = parseFloat(document.getElementById('ant').value);
  var myBox2 = 0.00200000;
  var result = document.getElementById('bank');
  var numb = myBox1 - myBox2;
  numb = numb.toFixed(8);
  result.value = numb;
}

<div class="wrap-input100 validate-input">
  <p>Amount</p><input class="input100" type="text" name="amount" id="ant" placeholder="Amount to Send" oninput="calculate()">
  <span class="focus-input100"></span>
  <span class="symbol-input100"></span>
</div>

<span class="login100-form-title">Tx Fee:-0.00200000 LiteCoin (LTC)</span>
<br>Your receive: - 
<input class="input100" type="text" id="bank" placeholder="Amount you receive" readonly>
<input type="submit" name="submit" value="Withdraw">