Number shows up as NaN instead of the number in my variable-CodePudding

I need it to show up as "0" before you click, and for some reason, it shows up as NaN, help!

<html>
<head>
  <script>

  var money = 0;
  var clickingPower = 10; 
    
    function moneyClick() {
    var clicks = clicks   1;
    
        document.getElementById("money").innerHTML = money   clickingPower * clicks;
    }
    
  </script>
</head>

  <h1>You have <span id="money"></span> dollars</h1>
  
  <button onclick="moneyClick()">Click to make money</button>
  
</body>

</html>

CodePudding user response：

It this line

   var clicks = clicks   1

Your variable clicks does not exist yet, that is why you get NaN

CodePudding user response：

You're using clicks before defining it.

you can try this:

<html>
    <head>
    <script>

        var money = 0;
        var clickingPower = 10; 

        function moneyClick() {
            var clicks = (clicks || 0)   1;

            document.getElementById("money").innerHTML = money   clickingPower * clicks;
        }

    </script>
    </head>

    <h1>You have <span id="money"></span> dollars</h1>

    <button onclick="moneyClick()">Click to make money</button>

    </body>
</html>

CodePudding user response：

You have to initialize the variable clicks:

var clicks = 0;
function moneyClick() {
clicks = clicks   1;

    document.getElementById("money").innerHTML = money   clickingPower * clicks;
}

CodePudding user response：

You need to initialize your variable. Make sure you put this outside of your function. Var clicks = 0

CodePudding user response：

  <script>
      var money = 0;
      var clicks = 0;
      var clickingPower = 10; 
    
        function moneyClick() {
        clicks = clicks   1;
    
         document.getElementById("money").innerHTML = money   clickingPower * clicks;
        }
    
     </script>