I have a couple of text boxes that accept numeric values. When a user enters a value in one of them it should run a calculation and display it in the other textbox (& vice versa). I’ve been playing around with the code and have got this, however it doesn’t seem to display the value.
<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>
I notice that there is the <output> tag that can be used to display results, however I don’t see how I’d make use of this to display the value in the text box. Please can someone offer some advice on what to do?
Elements should not have global references pointing to them via their
nameattribute. If you change thenameattribute toid, you will see that it almost works as expected, you just need to cast the value to a number before performing the addition.Demo: http://jsfiddle.net/AndyE/nvQLb/
As a general rule, you should keep your JavaScript and HTML separate, and refer to elements in the document using a fetching method like
document.getElementsByNameordocument.querySelector. That way, your code is easier to maintain and you will avoid any ambiguities that may arise by variables having the same name as a DOM element’sid.