Question

我正在尝试用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>

Answer 1

我没有看到任何NaN（当我运行你的代码时）但是发现一个错误，那就是document.getElementById("clicker").onclick= update(2);这里你没有为onclick分配函数但你调用函数并返回函数的值（这是{ {1}}对于上述情况，因为我们没有返回任何东西）被分配给onclick（未定义）。 o赋值功能执行undefined

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

Answer 2

这一行应如下：

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

...不...

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

正如你所写的那样，更新只被调用一次，值为2.你得到的是NaN，因为在你归零money之前调用了更新。

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

var money = 0;

在那里添加parseFloat没有任何好处。

Answer 3

您将调用更新函数作为onclick事件处理程序。

如果要发送参数，则应将其绑定在事件处理程序中，如下所示：

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

Answer 4

不是从DOM中抓取元素并分配事件，而是建议在HTML本身的onclick事件上显式连接该函数。无论如何，你正在做的是为一个事件分配一个函数调用。任何时候你有括号＆＃34;（）＆＃34;在函数名称之后，它被调用。相反，你必须分配一个被执行的函数体。例如，您的代码应该是 - ＆gt;

＆＃13;

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

＆＃13;

这是一个可能正如您所期望的那样工作的代码

＆＃13;

<!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>

＆＃13;

Answer 5

这里有些不妥之处。

正如其他人指出你需要在onclick上使用匿名函数并传递参数以在那里更新
您应该只包装范围中的数字，以使代码在更新功能中更容易解析数字。
您从未递增前一个值，每次调用更新时仅从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>

Answer 6

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

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

...不

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

Answer 7

<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>

Answer 8

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>

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

8 个答案: