JavaScript not working, display not updating

Question

I am trying to make coordinate converter, but there seems to be a problem, just as a prototype, I am trying to just read user input and display it as is in another div object. Following is my code:

JS code:

<script type="text/javascript">
            function calculate(){

                var user-x = document.getElementById('rect-x').value;
                var user-y = document.getElementById('rect-y').value;
                var user-z = document.getElementById('rect-z').value;

                var divobj1 = document.getElementById('cylindrical');
                divobj1.style.display='block';
                divobj1.style.color='rgb(0,136,180)';
                divobj1.style.fontSize="xx-large";
                divobj1.innerHTML = user-x ;

                var divobj2 = document.getElementById('spherical');
                divobj2.style.display='block';
                divobj2.style.color='rgb(0,136,180)';
                divobj2.style.fontSize="xx-large";
                divobj2.innerHTML = user-y ;
            }
        </script>

and here is my html calling code.

HTML code:

    <input type="number" id="rect-x" name="rect-x" placeholder="Enter value for X:"/><br/>
                            <input type="number" id="rect-y" name="rect-y" placeholder="Enter value for Y:"/><br/>
                            <input type="number" id="rect-z" name="rect-z" placeholder="Enter value for Y:"/><br/>
                            <br/><br/>
                            <p>Please see to the right for the converted values :)</p>
                            <input type="submit" value="CONVERT" onClick="calculate()"/>
<div>
                        <p>Cylindrical Coordinate System:</p>
                        <div id="cylindrical">
                            <!-- result comes here through the script -->
                        </div>
                    </div>
                    <br/>
                    <div>
                        <p>Spherical Coordinate System:</p>
                        <div id="spherical">
                            <!-- result comes here through the script -->
                        </div>
                    </div>

It appears to be okay, but nothing is displayed on the resulting divs.

Dashes (`-`) are not allowed in variable names. http://stackoverflow.com/a/3155352/451969 — Jared Farrish, Mar 23 '14 at 15:03
_"Please help me out ASAP and locate the problem"_ ~ Sounds pretty demanding. — Sparky, Mar 23 '14 at 15:05
You really need to learn how to look in the error console to see what script errors are being reported. That will save you an enormous amount of time. — jfriend00, Mar 23 '14 at 15:10

score 1 · Answer 1 · answered Mar 23 '14 at 15:03

1

You cannot use - in variable names.

answered Mar 23 '14 at 15:03

thetrompf

430
3
11

score 1 · Answer 2 · answered Mar 23 '14 at 15:03

1

Don't use hyphens (-) in variable names. The interpreter is parsing it as a subtraction.

Example change to:

var userX = document.getElementById('rect-x').value;

answered Mar 23 '14 at 15:03

MrCode

63,975
10
90
112

score 1 · Answer 3 · edited May 23 '17 at 11:44

1

You cannot use special characters as variable name except $ or _

It works if you remove it:http://jsfiddle.net/QC7Jp/

Also you can use unicode characters, as jfriend00 suggested in the comment What characters are valid for JavaScript variable names?

edited May 23 '17 at 11:44

Community

1
1

answered Mar 23 '14 at 15:05

Amit Joki

58,320
7
77
95

Lots of details here: http://stackoverflow.com/questions/1661197/valid-characters-for-javascript-variable-names – jfriend00 Mar 23 '14 at 15:09

score 0 · Accepted Answer · answered Mar 23 '14 at 15:04

Your console will give errors. You cant use variables like this:

var user-x = document.getElementById('rect-x').value;
var user-y = document.getElementById('rect-y').value;
var user-z = document.getElementById('rect-z').value;

The dash makes it subtract. It will try to subtract the value of x of of the value of user (like 4 - 2 )
This will work:

var user_x = document.getElementById('rect-x').value;
var user_y = document.getElementById('rect-y').value;
var user_z = document.getElementById('rect-z').value;

JavaScript not working, display not updating

4 Answers4