Question

我正在尝试制作坐标转换器，但似乎存在问题，就像原型一样，我试图只读取用户输入并将其显示为另一个div对象。以下是我的代码：

JS代码：

<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>

这是我的html调用代码。

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>

似乎没问题，但结果div上没有显示任何内容。

Answer 1

您不能在变量名中使用-。

Answer 2

不要在变量名中使用连字符（-）。解释器将其解析为减法。

示例更改为：

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

Answer 3

除$或_

外，您不能将特殊字符用作变量名称

如果您将其删除，则有效：http://jsfiddle.net/QC7Jp/

您也可以使用unicode字符，如评论What characters are valid for JavaScript variable names?

中建议的jfriend00

Answer 4

您的控制台会出错。你不能使用这样的变量：

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

破折号使其减去。它会尝试减去用户值x的值（如4 - 2）
这将有效：

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不工作，显示不更新

4 个答案: