Question

我正在构建一个旨在实时更新两个值之间的差异的表单（即，无需刷新页面）。它由多个字段组成，但最终我将获得两个值的总和，并使用HTML进行显示。

直到我到达要用html显示总和的功能之前，整个事情似乎都能按预期工作。

目的是在result中将output（一个隐藏字段）显示为纯文本。它不会在开始时触发，但是，如果我使用键盘打了一个额外的字符，则最终会听到该事件并显示文本。上。

我确定我缺少什么，但是如何确保输出总和？

function calculate() {
  var x = document.getElementById('fee_selector_holder').value || 0;
  var y = document.getElementById('content').value || 0;
  var result = document.getElementById('result');
  var myResult = parseInt(x) + parseInt(y);
  result.value = myResult; }


var input = document.getElementById("result"); 
var output = document.getElementById("output"); input.addEventListener("input", function() {
  output.innerText = this.value;
});

<input type="text" name="hostelfees" id="content" oninput="calculate()">
<input type="text" name="fee_id" id="fee_selector_holder" oninput="calculate()">
<input type="text" id="result" name="totalfee">

<hr>

<p>You can earn <span id="output"></span> more!

Answer 1

跨度上没有input事件。您可以创建一个单独的函数，并将计算值传递给该函数，该函数将负责更新span文本内容

function calculate() {
  var x = document.getElementById('fee_selector_holder').value || 0;
  var y = document.getElementById('content').value || 0;
  var result = document.getElementById('result');
  var myResult = parseInt(x) + parseInt(y);
  result.value = myResult;
  updateText(myResult)
}

function updateText(val) {
  document.getElementById("output").innerText = val;
}

<input type="text" name="hostelfees" id="content" oninput="calculate()">
<input type="text" name="fee_id" id="fee_selector_holder" oninput="calculate()">
<input type="text" id="result" name="totalfee">

<hr>

<p>You can earn <span id="output"></span> more!

通过JavaScript输出文本时出现问题

1 个答案: