在我的javascript代码中无法计算不同输出的迭代次数

Question

尝试设置代码以接受输入的数字，确定它们是负数还是正数，显示此信息，然后当输入0时，代码显示输入的正数数量和输入的负数数量，然后终止。在计数部分有问题，我不确定如何设置得更好。我也不确定如何将其设置为在放入0后终止。

function mapping() {
    var num = parseInt(document.getElementById("num1").value);
    var countp = 0;
    var countn = 0;

    if (num !== 0) {
        if (num > 0) {
            document.getElementById("output").innerHTML = "positive";
            countp += 1;
        } else {
            document.getElementById("output").innerHTML = "negative";
            countn += 1;
        }
    } else {
        document.getElementById("output").innerHTML = "countp: " + countp;
        document.getElementById("output").innerHTML = "countn: " + countn;
    }
}

谢谢。

Answer 1

代码有两个问题。

• count:您需要将countp和countn移出函数以使其成为全局的。
• counts :您正在将正数计数写入输出的html，然后您将其覆盖为负数。

这应该能起到作用；

​

var countp = 0;
var countn = 0;

function mapping() {
    var num = parseInt(document.getElementById("num1").value);

    if (num !== 0) {
        if (num > 0) {
            document.getElementById("output").innerHTML = "positive";
            countp += 1;
        } else {
            document.getElementById("output").innerHTML = "negative";
            countn += 1;
        }
    } else {
        var html =  "countp: " + countp + ", countn: " + countn;
        document.getElementById("output").innerHTML = html;

        // this line added
        countp = 0, countn = 0;
    }
}

<input type="text" id="num1">
<button onclick="mapping()">Test</button>

<div id="output">

</div>

​

Answer 2

代码的主要问题是countp和countn是局部变量。因此，每次调用函数时，都会创建它们并将其初始化为0。将这两行移到函数之外来修复这个bug！

另一个bug是最后一个else部件中的代码。在那里，您设置了两次innerHTML，因此该div最终只有countn。要修复此错误，请将最后一个innerHTML =替换为innerHTML +=。

最后，如果我理解正确的话，您希望在输入0后不再进行更新。要实现这一点，您可以添加另一个变量，比如当用户输入0时设置为true的isFinal，并在您的函数中添加一个检查。

更多建议：

• 而不是if (num!==0)，最好从if (num === 0)这样的积极条件开始。这样，如果用户没有输入有效的数字，您还可以避免在conditions.
• What中发生一些嵌套吗？在您的代码中，这将被视为负数。为"NaN“添加一个测试来解决这个问题。
• 你重复这个document.getElementById...很多次。请使用临时变量来解决此问题。
• 在现代JavaScript中，建议使用let或const而不是var.
• Be在行尾使用一致的分号。

因此，代码的结尾为：

let countp = 0;
let countn = 0;
let isFinal = false;

function mapping() {
    if (isFinal) {
        return;
    }

    const num = parseInt(document.getElementById("num1").value);

    let html = "";

    if (Number.isNaN(num)) {
        html = "invalid";
    } else if (num === 0) {
        html = "countp: " + countp + "<br>";
        html += "countn: " + countn;
        isFinal = true;
    } else if (num > 0) {
        html = "positive";
        countp += 1;
    } else {
        html = "negative";
        countn += 1;
    }

    document.getElementById("output").innerHTML = html;
}