HTML form not updating, when being manipulated by JavaScript

Question

So, i am in the midst of making a little website where you can calculate right angled triangles. Y'know, just for the fun of it.

Atm, i'm testing the real time calculation of the different html forms, however, i can't figure out why the form for cathetusB isn't updating.

Any help is appreciated!

This is how all the forms are set up: <input type="number" step="0.01" id="someID" onkeyup=calculate();>

EDIT: Added all the code to the Fiddle!

The code doing all the calculation is gonna go in the calculate() function, between getNumbers() and draw(). I'm just testing the real-time calculation aspect atm. That's why it's a bit "messy" to look at. It's just testing. — Elias Jørgensen, Dec 04 '14 at 20:20
You need to provide a reduced test case that actually demonstrates the problem. Showing us a tiny fragment of the HTML and linking to JS on a completely different website is not sufficient. — Quentin, Dec 04 '14 at 20:23
@Quentin I have added all the code to the fiddle. Sorry for being inconvenient! — Elias Jørgensen, Dec 04 '14 at 20:35
Oh, that doesn't make sense.. How do i bring up the error console? I've never really used JSFiddle before.. — Elias Jørgensen, Dec 04 '14 at 20:39
The error console is a feature of your browser. Most browsers make it available through F12 and various menus. — Quentin, Dec 04 '14 at 20:41

score 1 · Accepted Answer · answered Dec 04 '14 at 20:39

1

You have configured JSFiddle so that the code runs in an onload event handler.

The functions are therefore scoped to that handler function.

They are not globals.

They are not accessible to your intrinsic event handlers.

Configure JSFiddle to place the JS in the body instead of onload and the code works.

JSFiddle configuration

It would be better to replace your intrinsic event handler attributes with programatic event binding.

answered Dec 04 '14 at 20:39

Quentin

That is really weird. It works when i run it in JSFiddle, but not when i run it locally.. Any idea on why that could be? – Elias Jørgensen Dec 04 '14 at 20:42
No. I can't see your local code. The JavaScript console in your browser might have some useful error messages though. – Quentin Dec 04 '14 at 20:43
The code is exactly the same, which is why it's so weird. Except for the part, that i load the JS as an external file.. – Elias Jørgensen Dec 04 '14 at 20:45
Chrome gives me the error "Uncaught TypeError: Cannot set property 'value' of null", when i type something in the input form. Its very strange.. – Elias Jørgensen Dec 04 '14 at 20:51
Presumably, then, the code is not the same. The script is in a different place. http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element – Quentin Dec 04 '14 at 21:00
Thanks for the link! Moving the script's "link" to the bottom of the body fixed it! – Elias Jørgensen Dec 04 '14 at 21:04

score 0 · Answer 2 · answered Dec 04 '14 at 20:17

0

Be careful when using this :

<input type="number" step="0.01" id="cathetusA" onkeyup=calculate();>

If you are using the same id with every form things your code will not work. Id must be unique for every object

answered Dec 04 '14 at 20:17

stranger4js

why you say so? where you see duplicate? – Nirmal Mangal Dec 04 '14 at 20:24
"This is how all the forms are set up: " how all the forms – stranger4js Dec 04 '14 at 20:25
They're all set up that way, but with different ID's. Sorry for being unclear. – Elias Jørgensen Dec 04 '14 at 20:29
I have added all the code (HTML, CSS and JS) to the fiddle, so it's easier to look/test the code. – Elias Jørgensen Dec 04 '14 at 20:37

2 Answers2