如何在不同的文本框中顯示'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具有相同名稱的變量產生的任何歧義。