如何在不同的文本框中显示“oninput”计算结果？ （HTML）

Question

我有几个接受数值的文本框。当用户在其中一个中输入值时，它应该运行计算并将其显示在另一个文本框中（反之亦然）。我一直在玩代码，并且已经得到了这个，但它似乎没有显示价值。

<form oninput="valueB.value=valueA.value+900">
    <input type="number" name="valueA" value="" />
</form>

<form oninput="valueA.value=valueB.value+300">
    <input type="number" name="valueB" value="" />
</form>

我注意到有<output>标签可用于显示结果，但是我没有看到我如何使用它来显示文本框中的值。请有人可以提供一些建议吗？

Answer 1

元素不应具有通过其name属性指向它们的全局引用。如果您将name属性更改为id，您会发现它几乎按预期工作，您只需要在执行添加之前将值转换为数字。

演示：http://jsfiddle.net/AndyE/nvQLb/

---

作为一般规则，您应该将JavaScript和HTML分开，并使用抓取方法（如document.getElementsByName或document.querySelector）引用文档中的元素。这样，您的代码更易于维护，并且您将避免与DOM元素id具有相同名称的变量可能产生的任何歧义。