Question

我想使用全局变量＆＃39; x，y＆＃39;在下面的功能中。

当我将变量放在函数

中时，它会起作用

<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">

    var x = document.getElementById('field_one').value
    var y = document.getElementById('field_two').value

    function calculator()
        {
            var p = x * y;
            alert(x + " times " + y + " is " + p); //shows undefined times undefined is NaN 
        } // calculator()


</script>
</head>

<body>
<p>This is a simple calculator.</p>
<form name="the_form">
       Number 1: <input type="text" value="" id="field_one"/> <br />
       Number 2: <input type="text" value="" id="field_two"/> <br />
<input type="button" value="multiply them!" onclick="javascript:calculator()"/>
</form>
</body>
</html>

Answer 1

您的代码有效。但是你遇到了种族问题。您尝试在创建元素之前找到它们：

var x, y;
window.onload = function() {
    x = document.getElementById().value;
    y = document.getElementById().value;
}

如果您的网站长时间加载，用户可能会尝试在设置x和y之前启动计算器脚本。解决方案：

var x, y, calculator;
calculator = function() {
    alert("please wait, until the site is completely loaded");
};
window.onload = function() {
    x = document.getElementById().value;
    y = document.getElementById().value;
    calculator = function() {
        alert(x + " times " + y + " is " + x * y);
    };
}

Answer 2

问题在于你想获得x和y的值，但是在调用函数时它们不是设置值。如果你想多次使用变量，你需要创建一个函数（我称之为 setValues ），它负责设置x和y的值以及输入的值，并且总是你需要获取您可以调用的输入值。像这样：

var x;
var y;

function setValues() {
    x = document.getElementById('field_one').value;
    y = document.getElementById('field_two').value;
}

document.getElementById("calc").addEventListener("click", function() {
    setValues();
    var p = x * y;
    alert(x + " times " + y + " is " + p);
}, false);

<p>This is a simple calculator.</p>
<form name="the_form">
       Number 1: <input type="text" value="" id="field_one"/> <br />
       Number 2: <input type="text" value="" id="field_two"/> <br />
<input type="button" id="calc" value="multiply them!" />
</form>

Answer 3

在.html内容之后定位脚本可确保在您希望脚本运行时定义所有内容。
您可以在不使用＆＃39; var＆＃39;声明。
不要忘记用＆＃39 ;;＆＃39;

这样，您的代码具有100％的功能：

<html>
<head>
<meta charset="utf-8">
<title></title>

</head>

<body>
<p>This is a simple calculator.</p>
<form name="the_form">
       Number 1: <input type="text" id="field_one"/> <br/>
       Number 2: <input type="text" id="field_two"/> <br/>
<input type="button" value="multiply them!" onclick="readFields();"/>
    <script type="text/javascript">

        function readFields(){
    x = document.getElementById('field_one').value;
    y = document.getElementById('field_two').value;
            calculator();
        }

    function calculator(){

            var p = x * y;
            alert(x + " times " + y + " is " + p); //shows undefined times undefined is NaN 
        } // calculator()


</script>
</form>
</body>
</html>

如何在javascript函数中使用全局变量？

3 个答案: