运行函数更改变量时返回 NaN答案

【问题标题】：NaN returned when running a function to change a variable运行函数更改变量时返回 NaN
【发布时间】：2018-08-26 00:52:26
【问题描述】：

我正在尝试用 HTML 和 JavaScript 制作一个点击游戏，当我点击按钮给我钱时，什么也没有发生。我尝试将它打印到控制台，它返回为 NaN 一次，一旦我再次单击该按钮，什么也没发生。代码如下：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <link rel="icon" type="image/png" href="http://marcopolo0306.github.io/content/images/icon.png">
    </head>

    <body>

        <a class="clicker" id="clicker" href="#"> Click for Money </a>

        <div class="main-content">
            <h2 id="para">Money: 0</h2>

            <script type="text/javascript">

                document.getElementById("clicker").onclick= update(2);
                //document.cookie = "money="+money, time() + (10 * 365 * 24 * 60 * 60);
                var money = parseFloat(0);
                function update (amount)
                {
                    console.log(parseFloat(amount))
                    money += parseFloat(amount);
                    document.getElementById("para").innerHTML="Money: " + parseFloat(amount);
                    return false;
                }
            </script>
        </div>
    </body>
</html>

【问题讨论】：

标签： javascript html return nan

【解决方案1】：

document.getElementById("clicker").onclick= function(){ update(2) };
 //document.cookie = "money="+money, time() + (10 * 365 * 24 * 60 * 60);
 var money = parseFloat(0);
 
 
function update (amount){
   money += amount;                    
   document.getElementById("para").innerHTML="Money: " + money;
   return false;
}

<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <link rel="icon" type="image/png" href="http://marcopolo0306.github.io/content/images/icon.png">
    </head>

    <body>

        <a class="clicker" id="clicker" href="#"> Click for Money </a>

        <div class="main-content">
            <h2 id="para">Money: 0</h2>

            
        </div>
    </body>
</html>

【讨论】：

【解决方案2】：

<head>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" type="image/png" href="http://marcopolo0306.github.io/content/images/icon.png">
</head>

<body>

    <a class="clicker" id="clicker" onclick="update(2)" href="#"> Click for Money </a>

    <div class="main-content">
        <h2 id="para">Money: 0</h2>

        <script type="text/javascript">
            //document.cookie = "money="+money, time() + (10 * 365 * 24 * 60 * 60);
            var money = parseFloat(0);
            function update (amount)
            {
                console.log(parseFloat(amount)) 
                money += parseFloat(amount);
                console.log(money);
                document.getElementById("para").innerHTML="Money: " + money;
                return false;
            }
        </script>
    </div>
</body>

【讨论】：

【解决方案3】：

由于您正在递增 money 变量，因此您似乎还希望显示该值，而不是传入 amount：

document.getElementById("para").innerHTML="Money: " + parseFloat(money);

不是……

document.getElementById("para").innerHTML="Money: " + parseFloat(amount);

【讨论】：

【解决方案4】：

与其从 DOM 中获取元素并分配事件，不如在 HTML 本身的 onclick 事件上显式连接该函数。无论如何，您所做的是将函数调用分配给事件。只要函数名后面有括号“()”，就会调用它。相反，您必须分配一个函数的主体，该主体将被执行。例如，您的代码应该是 ->

document.getElementById("clicker").onclick= function () {update(2)};

这里的代码可能会像您预期的那样工作

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <link rel="icon" type="image/png" href="http://marcopolo0306.github.io/content/images/icon.png">
    </head>

    <body>

        <a class="clicker" id="clicker" onclick="update(2)" href="#"> Click for Money </a>

        <div class="main-content">
            <h2 id="para">Money: 0</h2>

            <script type="text/javascript">
                var money = parseFloat(0);
                function update (amount)
                {
                    console.log(parseFloat(amount))
                    money += parseFloat(amount);
                    document.getElementById("para").innerHTML="Money: " + parseFloat(amount);
                    return false;
                }
            </script>
        </div>
    </body>
</html>

【讨论】：

【解决方案5】：

这里有一些问题。

正如其他人指出的，您需要在 onclick 上使用匿名函数并在其中传递参数以进行更新
您应该只将数字包装在 span 中，以使代码在更新函数中更容易解析数字。
您从未递增先前的值，每次调用 update 时仅从 0 递增。你需要获取之前的值，解析它，然后添加到它。

document.getElementById("clicker").onclick = function() {
  update(2)
};
//document.cookie = "money="+money, time() + (10 * 365 * 24 * 60 * 60);
var para = document.getElementById("para");
var money = document.getElementById("money");

function update(newAmount) {
  var oldMoney = parseFloat(money.textContent);
  var newMoney = oldMoney + parseFloat(newAmount);
  money.innerHTML = parseFloat(newMoney);
}

<a class="clicker" id="clicker" href="#"> Click for Money </a>

<div class="main-content">
  <h2 id="para">Money: <span id="money">0</span></h2>

</div>

【讨论】：

【解决方案6】：

我没有看到任何 NaN（当我运行您的代码时），但发现了一个错误，那就是 document.getElementById("clicker").onclick= update(2); 在这里您没有将函数分配给 onclick，而是调用函数并返回函数值（即 undefined对于上述情况，因为我们没有返回任何内容）被分配给 onclick（未定义）。 o 分配函数做关注document.getElementById("clicker").onclick= function(){update(2);}

<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <link rel="icon" type="image/png" href="http://marcopolo0306.github.io/content/images/icon.png">
    </head>

    <body>

        <a class="clicker" id="clicker" href="#"> Click for Money </a>

        <div class="main-content">
            <h2 id="para">Money: 0</h2>

            <script type="text/javascript">

                document.getElementById("clicker").onclick= function(){ update(2) };
                //document.cookie = "money="+money, time() + (10 * 365 * 24 * 60 * 60);
                var money = parseFloat(0);
                function update (amount)
                {
                    console.log(parseFloat(amount)) 
                    money += parseFloat(amount);
                    console.log(money);
                    document.getElementById("para").innerHTML="Money: " + parseFloat(amount);
                    return false;
                }
            </script>
        </div>
    </body>
</html>

【讨论】：

【解决方案7】：

这一行应该如下：

document.getElementById("clicker").onclick= update

...不是...

document.getElementById("clicker").onclick= update(2)

正如您所写，update 只被调用一次，值为 2。您得到的是 NaN，因为 update 在您将 money 归零之前被调用。

顺便说一句，这就足够了：

var money = 0;

在其中添加parseFloat 没有任何好处。

【讨论】：

【解决方案8】：

您正在将调用分配给更新函数作为 onclick 事件处理程序。

如果你想发送一个参数，你应该像这样在事件处理程序中绑定它：

document.getElementById("clicker").onclick = update.bind(this, 2);

【讨论】：