为什么不能在函数中使用这些变量？

Question

好的，我是编程新手，目前正在研究javascript。

我知道我的问题与范围有关，但我想了解为什么它实际上并不想打球。

我做了一个基本的“计算器”，将用户在输入字段中输入的两个数字相加。

查看有效的代码

无效的代码

var numOne = document.getElementById('num-one');
var numTwo = document.getElementById('num-two');
var addSum = document.getElementById('add-sum');

//function to add 2 numbers enter into the elements
//declare function name
function add() {
    //set our function var's to manipulate
var one  = parseFloat(numOne.value) || 0;
var two =  parseFloat(numTwo.value) || 0; 
addSum.innerHTML = one + two;

我的问题是：为什么我必须创建方法变量而不使用已经声明的变量？

Answer 1

您应该在某处调用add（）函数。 parseInt的使用是将变量转换为整数，在其中找到一些整数，否则将发生变量的串联。

Answer 2

您的无效代码：

//create a calculator to add 2 numbers together.

var numOne = document.getElementById('num-one');
var numTwo = document.getElementById('num-two');
var addSum = document.getElementById('add-sum');

// function to add 2 numbers enter into the elements
function add() {
    //set our function var's to manipulate
    numOne += parseFloat(numOne.value) || 0;
    numTwo +=  parseFloat(numTwo.value) || 0; 
    addSum.innerHTML = numOne + numTwo;
}

numOne.addEventListener("input", add);
numTwo.addEventListener("input", add);

这是行不通的，因为numOne是DOM元素，因此对DOM元素执行+=根本无法完成您想要的操作。 您不想添加到DOM元素。 您要检索元素的.value属性，以便可以在计算中使用它。 您可以像下面的代码片段那样简化代码：

 // create a calculator to add 2 numbers together. var numOne = document.getElementById('num-one'); var numTwo = document.getElementById('num-two'); var addSum = document.getElementById('add-sum'); // function to add 2 numbers enter into the elements function add() { //set our function var's to manipulate addSum.innerHTML = (parseFloat(numOne.value) || 0) + (parseFloat(numTwo.value) || 0); } numOne.addEventListener("input", add); numTwo.addEventListener("input", add); 

 p { line-height: 150%; } 

 <p> Num One: <input id="num-one"><br> Num Two: <input id="num-two"><br> Sum: <span id="add-sum">0</span> </p> 

Answer 3

这是我建议的答案。

<script type="text/javascript">

    function add(a, b) 
    {
        //set our function var's to manipulate
        a = parseFloat(a);
        b = parseFloat(b);
        return a + b;
    }

    function go() // do this in response to some event like form submit
    {
        var numOne = document.getElementById('num-one').value;
        var numTwo = document.getElementById('num-two').value;
        document.getElementById('add-sum').value = add(numOne, numTwo); // call the add function here
    }

</script>

使用功能参数。 它们使功能更可重用。 并且不要害怕使用函数的返回值。 在此示例中， add()函数不依赖于任何外部代码或变量。 只要将正确的参数传递给它，它将返回一个适当的值。 注意，它不会尝试执行任何错误处理或类型检查，但这只是一个简单的示例。

另外，您无需为“加和”表单字段存储变量，因为您从未读过它的值。 您只需获得引用即可编写总和。

最后，我添加了go()函数，由于页面上的某种事件（例如表单提交或输入字段中的onChange go() ，您可能应该调用它。