Как отобразить результат расчета 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.