javascript - 值方法不起作用函数回调

Question

我正在创建一个小程序，它返回数学方程的结果。我有一个数字输入字段，其中包含 ID 和类“value1”(我尝试使用两者进行操作)，允许用户输入数字值。我有另一个数字输入字段，该字段被 ID 和类“result1”禁用，显示方程式的结果。

我有一个ID为solution1_btn的按钮，单击该按钮时假设会启动“multiples”函数回调，该回调将“value1”作为参数。

当我替换“value1”时，它是一个物理数字，例如1000，方程的结果出现在“result1”中而不按solution1_btn，但是当我将“value1”作为参数并按solution1__btn时它不起作用。

下面是我将问题范围缩小到的 JavaScript 代码部分和 HTML。

JS:

 // declare Euler1 assign it to function with parameter num

// click button
var solution1 = document.getElementById("solution1_btn");

// user entered value
//var value1 = document.getElementById("value1");
var value1 = document.getElementsByClassName("result1")[0].value;
//console.log(value1);

// result input field
var result1 = document.getElementById("result1");


function multiples(num) {

    // declare sum assign it value 0   
    var sum = 0;
    //  declare a for loop that iterates while the counter "i" is less than num   
    for (var i = 0; i < num; i++) {
        // if statement test whether the division remainder of 3 and 5 are equal to 0
        if (i % 3 || i % 5 === 0) {
            // assigns the value of i to sum 
            sum += i;
            var newSum;
            result1.value = newSum;
            newSum = sum;
        };
    };
    // returns the value of sum from the function callback argument 1000 etc.

    return newSum;
};

var fix = value1;

solution1.onclick = multiples(fix);

HTML:

<label for="value">Enter Value: </label>
            <input id="value1" class="value1" type="number" title="value field" placeholder="e.g. 1000">
            <button type="button" id="solution1_btn" title="solution 1 button">Enter</button>
            <input id="result1" class="result1" type="number" disabled>

Answer 1

天哪，您的代码有很多问题，我会尝试将它们全部运行一遍。

<小时/>

引用 HTML 元素

正如您所发现的，HTML 元素可以通过多种方式引用。一般来说，您应该选择最合适的并坚持使用。如果您使用 id 和类，事情很快就会变得困惑 - 特别是 id 应该是唯一的，但类不一定如此。就您而言，我认为您最安全的做法是坚持使用 id，然后始终使用 document.getElementById。

多重 bool 检查

关于这行代码

if (i % 3 || i % 5 === 0) {

您可能认为这等于“如果 i 能被 3 或 5 整除”，这是 bool 逻辑的逻辑(并且经常被误解)部分。事实上，你应该想到“如果 i 能被 3 整除或者 i 能被 5 整除”，这相当于代码中的以下内容

if ((i % 3) === 0 || (i % 5) === 0) {

是的，不幸的是您需要重复 === 0 部分两次。

变量范围

这是一个很大的主题，还有很多其他的information on the subject ，但足以说明，在您的函数中 newSum 仅在 if block 内定义，并且在循环的每次迭代中都会重新定义，因此它不会包含您的总和也许正在期待。

无论如何，这是不必要的，你应该只返回sum

function multiples(num) {

    // declare sum assign it value 0   
    var sum = 0;
    //  declare a for loop that iterates while the counter "i" is less than num   
    for (var i = 0; i < num; i++) {
        // if statement test whether the division remainder of 3 and 5 are equal to 0
        if ((i % 3) === 0 || (i % 5) === 0) {
            // assigns the value of i to sum 
            sum += i;

        };
    };
    // returns the value of sum from the function callback argument 1000 etc.

    return sum;
};

事件处理程序

您正在尝试使用此代码设置发生onclick 的事件

solution1.onclick = multiples(fix);

这会尝试添加一个事件处理程序，其中包含调用结果 multiples - 而不是 multiples 本身。您应该为事件处理程序分配一个函数，并将该字段的值分配给调用multiples函数的结果。

solution1.onclick = function(){
    result1.value = multiples(parseInt(value1.value,10));
};

工作示例

下面是您的代码的工作示例，希望可以帮助您将所有内容整合在一起。

var solution1 = document.getElementById("solution1_btn");
var value1 = document.getElementById("value1");
var result1 = document.getElementById("result1");

function multiples(num) {
    // declare sum assign it value 0   
    var sum = 0;
    //  declare a for loop that iterates while the counter "i" is less than num   
    for (var i = 0; i < num; i++) {
        // if statement test whether the division remainder of 3 and 5 are equal to 0
        if ((i % 3) === 0 || (i % 5) === 0) {
            // assigns the value of i to sum 
            sum += i;           
        };
    };
    // returns the value of sum from the function callback argument 1000 etc.

    return sum;
};

solution1.onclick = function(){
     result1.value = multiples(parseInt(value1.value,10));   
}

<label for="value">Enter Value: </label>
<input id="value1" class="value1" type="number" title="value field" placeholder="e.g. 1000">
<button type="button" id="solution1_btn" title="solution 1 button">Enter</button>
<input id="result1" class="result1" type="number" disabled>