Question

我在字段中显示初始值，并希望显示计算值的初始总计。

仅在修改字段后才显示总计。我猜是因为它对oninput事件有反应。

代码：

<form id="form" oninput="result.value = parseInt(field1.value) + parseInt(field2.value)">
    <input type="number" name="field1" id="field1" value="600">
    <input type="number" name="field2" id="field2" value="200">
    Total <output name="result" id="result" value="document.write(this.result.value)">
    </output>
</form>

我可以在输出标签中输入800，但是我希望它是动态的。

Answer 1

您可以使用document.getElementById()并指定输入字段的ID。

由于输入字段的值是一个字符串，因此需要通过Number函数将这些值转换为Number()类型。

let value1 = Number(document.getElementById('field1').value);
let value2 = Number(document.getElementById('field2').value);

result.value = value1 + value2;

<form id="form" oninput="result.value=parseInt(field1.value)+parseInt(field2.value)">
<input type="number" name="field1" id="field1" value="600">
<input type="number" name="field2" id="field2" value="200">
Total <output name="result" id="result" value="document.write(this.result.value)"></output>
</form>

您可以阅读有关document.getElementById()和Number()的更多信息

Answer 2

您的document.write并没有做任何有用的事情（基本上是说“将该属性设置为该属性的值”），可以将其删除；无需将值写入HTML，您只需在js中设置表单字段的value属性即可。

在这里，我通过删除不必要的部分或非功能部分，将javascript从HTML属性中移出并将“初始化”和“更新”任务组合为一个函数来简化了代码：

// these happen implicitly based on the field IDs; I'm redeclaring 
// them here just for clarity, but you could leave these next four 
// lines out and this code would still work:
var result = document.getElementById('result')
var field1 = document.getElementById('field1');
var field2 = document.getElementById('field2');
var form   = document.getElementById('form');

// update value on input:
form.oninput = function() {
  // use Number() instead of parseInt() if you want to support non-integer values here
  result.value = parseInt(field1.value) + parseInt(field2.value);  
}

// set initial value on page load by calling that function:
form.oninput()

<form id="form">
  <input type="number" id="field1" value="600">
  <input type="number" id="field2" value="200"> 
  Total <output id="result"></output>
</form>

html输出标记不显示输出

2 个答案: