Question

好的我是编程新手并且正在搞清楚javascript。

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

我已经制作了一个基本的＆＃34;计算器＆＃34;将用户在输入字段中输入的两个数字相加。

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属性，以便在计算中使用它。您可以像这个工作代码段一样简化代码：

＆＃13;

// 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);

＆＃13;

p {
  line-height: 150%;
}

＆＃13;

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

＆＃13;

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。

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

3 个答案: