Question

我正在创建一个返回数学方程结果的小程序。我有一个带有ID和CLASS“value1”的数字输入字段（我试图使用两者进行操作），允许用户输入数字值。我有另一个数字输入字段，使用ID和CLASS“result1”禁用，显示等式的结果。

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

当我将“value1”替换为物理数字时，例如1000，等式的结果出现在“result1”没有按解决方案1_btn，但是当我把“value1”作为参数并按解决方案1__btn时它不起作用。

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

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。

多个布尔检查

关于这行代码

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

你可能期望这相当于“如果我可被3或5整除”，那么这是布尔逻辑的逻辑（通常被误解）部分。实际上，您应该考虑“如果我可以被3整除，或者我可以被5整除”，这相当于代码中的以下内容

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

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

可变范围

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

无论如何，这是不必要的，您应该返回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>

Answer 2

这是一个小问题 - 我希望已经解决了：http://jsfiddle.net/w0qvdqb2/

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

system.web/compilation/assemblies

这意味着multiples方法应该执行，并且返回值被赋值给变量solution1.onclick但是solution1.onclick接受回调。

根据您的评论情况而言，未按照描述进行编写。

与输入和输出类和ID混合。

请查看更新的代码。

value方法不工作函数回调

2 个答案:

引用HTML元素

多个布尔检查

可变范围

事件处理程序

工作示例