JS 脚本返回 NaN

Question

我在使用 NaN 时遇到问题 - 不是数字。我在这里查看了多个网络资源和几个问题，试图找到解决方案，但没有一个有效。任何想法：

var cur_lv = 1;
var newscount = document.getElementById("newscount").value;
var btn_up = document.getElementById("btn_up");
var btn_down = document.getElementById("btn_down");

function setButtons() {
    if (cur_lv == 1) {
        btn_up.onmouseover = function() {
            btn_up.setAttribute("src", "/img/arror_state_2.jpg");
        };

        btn_up.onmouseout = function() {
            btn_up.setAttribute("src", "/img/arror_state_2.jpg");
        };

        btn_down.onmouseover = function() {
            btn_down.setAttribute("src", "/img/arror_state_4.jpg");
        };

        btn_down.onmouseout = function() {
            btn_down.setAttribute("src", "/img/arror_state_3.jpg");
        };
    } else if (cur_lv < newsount) {
        btn_up.onmouseover = function() {
            btn_up.setAttribute("src", "/img/arror_state_2.jpg");
        };

        btn_up.onmouseout = function() {
            btn_up.setAttribute("src", "/img/arror_state_1.jpg");
        };

        btn_down.onmouseover = function() {
            btn_down.setAttribute("src", "/img/arror_state_4.jpg");
        };

        btn_down.onmouseout = function() {
            btn_down.setAttribute("src", "/img/arror_state_3.jpg");
        };
    } else if (cur_lv = newscount) {
        btn_up.onmouseover = function() {
            btn_up.setAttribute("src", "/img/arror_state_2.jpg");
        };

        btn_up.onmouseout = function() {
            btn_up.setAttribute("src", "/img/arror_state_1.jpg");
        };

        btn_down.onmouseover = function() {
            btn_down.setAttribute("src", "/img/arror_state_4.jpg");
        };

        btn_down.onmouseout = function() {
            btn_down.setAttribute("src", "/img/arror_state_4.jpg");
        };
    };
};

setButtons();

$(document).ready(function() {
    $("#btn_up").click(function() {
        var cur_lv = cur_lv - 1;
        setButtons();
        alert(cur_lv);
        alert(newscount);
    });

    $("#btn_down").click(function() {
        var cur_lv = cur_lv + 1;
        setButtons();
        alert(cur_lv);
        alert(newscount);
    });
});

正如我所说，我查看了很多资源但无法修复它。我已经尝试过parseInt()，但这无济于事——无论我把它放在哪里。

Answer 1

你的范围有问题，这是怎么回事：

1. 您将cur_lv 声明为1 [第2 行]（因为它不在函数内部，cur_lv 将是一个全局变量）。
2. 在 #btn_up 和 #btn_down 的 click 函数内部，您正在声明一个具有局部范围的新变量（var 语句表示您正在声明一个局部变量）。
3. 当您单击#btn_up 或#btn_down 时，将在本地范围内创建一个新变量（cur_lv），其值为undefined。接下来，您将cur_lv - 1 归因于cur_lv，JavaScript 将在算术运算中将undefined 转换为NaN，因此NaN - 1 也是NaN，这就是它返回Nan 的原因.

解决方案是删除click 函数中#btn_up 和#btn_down 的声明var，这样您就可以引用全局cur_lv（在第2 行声明）。

[更新]

您的代码还有一些其他问题：

1. 正如@Pevara 所说，您的第一个 else if (JS Script Returns NaN) 中有错字。
2. 如果您将newscount 归因于cur_lv，则在第二个中，不要比较它们（使用== 或===）。
3. 根据您将<script> 标记放在何处，您的代码将找不到某些元素： 例如： ` var bt = document.getElementById('button'); 我的真棒按钮 btwill be undefined, because the script will run before the button exists in page. To resolve this issue, you can add code inside$(document).ready(function() {`，这个函数里面的代码只有在文档准备好之后才会运行（包括这个小按钮）。

尝试修复列出的问题并将代码（从 var cur_lv = 1; 移动到 setButtons();）到 $(document).ready(function() { 中。此外，您可以使用浏览器中的开发人员工具来帮助您发现一些错误。

希望对你有帮助！

Answer 2

问题是这段代码：

var cur_lv = cur_lv - 1;

它创建了一个隐藏全局变量的局部变量。赋值的右边也使用了局部变量，所以表达式的值为undefined - 1。 undefined 将被转换为可用于减法的数值，该数值为NaN。 NaN - 1 的结果是NaN。

代码应该是：

cur_lv = cur_lv - 1;