html输出标记不显示输出
html输出标记不显示输出
提问于 2018-08-18 22:37:01
我将初始值显示在字段中，并希望显示计算值的初始合计。
合计仅在修改字段后显示。我猜是因为它会对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>我可以在output标记中输入800，但我希望它是动态的。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-18 23:39:14
您的document.write没有做任何有用的事情(它基本上是在说“将此属性设置为此属性的值”)，可以删除；您只需在js中设置表单域的value属性，而不是将该值写入HTML.
在这里，我通过删除不必要的或不起作用的部分，将javascript移出HTML属性，并将"initialize“和"update”任务组合到一个函数中，从而简化了代码：
// 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>
Stack Overflow用户
发布于 2018-08-18 22:55:12
您可以使用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()的更多信息
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51909721
复制相关文章
相似问题