值方法不起作用函数回调

Question

我正在创建一个 returns 数学方程式结果的小程序。我有一个带有 ID 和 CLASS "value1" 的数字输入字段（我试图同时使用两者进行操作），允许用户输入一个数字值。我有另一个数字输入字段，该字段使用显示方程式结果的 ID 和 CLASS "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

这是一个 fiddle 你的问题 - 我希望解决：http://jsfiddle.net/w0qvdqb2/

您的代码中有几个不同的问题，首先：

solution1.onclick = multiples(fix);

这意味着应该执行 multiples 方法并且 return 值被分配给变量 solution1.onclick 但 solution1.onclick 接受回调。

根据您的评论条件没有按照描述的那样写。

并混合输入和输出类和 ids。

请查看更新后的代码。

Answer 2

天哪，你的代码有很多问题，我会尝试运行解决所有问题。

引用 HTML 个元素

正如您所发现的，

HTML 元素可以通过多种方式引用。通常，您应该选择最合适的并坚持使用。如果你使用一个 id 和一个 class 事情很快就会变得混乱 - 特别是看到 id 应该是唯一的，但 classes 不一定是这样。在你的情况下，我认为你最安全的是坚持使用 id，然后总是使用 document.getElementById.

多重布尔检查

关于这行代码

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

您可能认为这等同于 "if i is divisible by 3 or 5"，这是布尔逻辑的逻辑部分（并且经常被误解）。实际上，你应该认为"if i is divisible by 3 or i is divisible by 5"，相当于代码中的以下内容

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

是的，遗憾的是您需要重复 === 0 部分两次。

可变范围

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

无论如何，没必要，你应该return 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 本身。您应该为事件处理程序分配一个函数，并将字段的 value 分配给调用 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>

值方法不起作用函数回调

value method not working function callback

javascript

user-input

callback

引用 HTML 个元素

多重布尔检查

可变范围

事件处理程序

工作示例