JS 脚本 Returns NaN

Question

我在使用 NaN - Not a Number 时遇到了问题。我查看了多个 Web 资源和此处的几个问题以尝试找到解决方案，但其中 none 有效。任何想法：

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

问题是这段代码：

var cur_lv = cur_lv - 1;

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

代码应该是：

cur_lv = cur_lv - 1;

Answer 2

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

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

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

[更新]

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

正如@Pevara 所说，您的第一个 else if ().
如果您将 newscount 归因于 cur_lv，而不是比较它们（使用 == 或 ===）。
根据您放置 <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() {。此外，您可以使用浏览器中的开发人员工具来帮助您捕获一些错误。

希望对您有所帮助！

JS 脚本 Returns NaN

JS Script Returns NaN

javascript

jquery

variables

var

nan