2016-07-19 16 views
0

JavaScriptのコードでは、この関数は呼び出されるたびにカウンタをインクリメントする必要がありますが、呼び出されるたびに値は同じままですそれは増分していないのですか?javascript counterは各呼び出しでカウンタを増やしていません

<body> 
     <p>increasing the counter</p> 
     <button type = "button" onclick="document.getElementById('para').innerHTML = add()">Counter</button> 
     <p id = "para"></p> 

    <script> 
     function add(){ 
      var counter = 0; 
      return counter = counter + 1; 
      } 
    </script> 
</body> 
+1

たくさん。この作業が完了したら、クロージャを使用して**カウンタ**をグローバルスコープから外すことも考えられます。 – JonSG

答えて

1

(関数の外)グローバルcounterを定義するか、他の関数が呼び出されているすべての時間は、counterの値は0

var counter = 0; 
 

 
function add() { 
 
    return counter = counter + 1; //OR return ++counter; 
 
}
<p>increasing the counter</p> 
 
<button type="button" onclick="document.getElementById('para').innerHTML = add()">Counter</button> 
 
<p id="para"></p>

1

に設定されているあなたは、あなたを取る必要がありますcounterは、関数定義外の変数です(つまり、グローバル変数として定義します)。これにより、前の値が保持されます。そうしないと、すべての関数を呼び出す時、その値は0

<body> 
     <p>increasing the counter</p> 
     <button type = "button" onclick="document.getElementById('para').innerHTML = add()">Counter</button> 
     <p id = "para"></p> 

    <script> 
     var counter = 0; 
     function add(){ 
      return counter = counter + 1; 
      } 
    </script> 
</body> 
0

counterにリセットされますが、各コールに戻っ0に設定されています。この場合、カウンタの

だけ関数の外に移動することができる:

var counter = 0; 
 
function add(){ 
 
    return counter = counter + 1; 
 
}
 <p>increasing the counter</p> 
 
     <button type = "button" onclick="document.getElementById('para').innerHTML = add()">Counter</button> 
 
     <p id = "para"></p>

0
Slightly alter program  
<html> 
    <body> 
    <script> 
    var counter = 0; 

    function add() { 
     return counter = counter + 1; 
    } 
    </script> 
    <p>increasing the counter</p> 
    <button type="button" onclick="document.getElementById('para').innerHTML = add 

    ()">Counter</button> 
    <p id="para"></p> 
    </body> 
    </html> 
0

add()機能のうちcounterを宣言する。 add()が呼び出されるたびに、カウンターはZERO counter = 0に設定され、その後1をインクリメントしてから1 return counter = counter + 1に戻ります。

var counter = 0; 
 
function add(){ 
 
    return counter = counter + 1; 
 
}
 <p>increasing the counter</p> 
 
     <button type = "button" onclick="document.getElementById('para').innerHTML = add()">Counter</button> 
 
     <p id = "para"></p>

第2の方法、あなたは(グローバルスコープを汚染を避けるために)add()var counterを宣言したい場合は、JSの閉鎖を使用しています。次のコードスニペットを参照してください。下記の良い答えの

var add = (function(){ 
 
    var counter = 0; 
 
    return function() {return counter = counter + 1;} 
 
})();
 <p>increasing the counter</p> 
 
     <button type = "button" onclick="document.getElementById('para').innerHTML = add()">Counter</button> 
 
     <p id = "para"></p>

関連する問題