JavaScriptで各クリックを再宣言しないようにカウントを宣言する方法は？

Question

クリックしたときに "count is odd！"に置き換えたいと思っています。または "count is even" しかし、1クリックイベントごとに再初期化されないようにカウントを宣言する必要がありますか？ここ

は私がして来たものです：

<h1 onclick="var count=1; 
       if (count%2==1) { 
         this.innerHTML='count is odd!'; count++;} 
       else{  
       this.innerHTML='count is even';count++;} "> 
    Click on this text</h1> 

今あなたが見ることができるように何が起こるのか数回のクリックで1であるということです。

Answer 1

これを試すことができます。counter変数はonclickクロージャスコープにあり、すべてのonclickイベントのグローバル変数のように動作します。

var elements = document.getElementsByTagName("h1") 
for (var key in elements) 
{ 
    if (elements.hasOwnProperty(key)) 
    { 
     var counter = 1; 
     elements[key].onclick = function() 
     { 
      var oddEven = (counter++ % 2 == 1) ? "odd" : "even"; 

      elements[key].innerHTML = "count is " + oddEven; 
     } 
    } 
} 

注：onclickインラインコードあなたの要素を必要としません。

Answer 2

このようにマークアップとjavascriptを混ぜるのはかなり悪いです。私はロジックの分離をお勧めします：

<h1 id="myH">Click on this text</h1> 

をし、その後、別のJavaScriptファイルに：

var count = 1; 
window.onload = function() { 
    var myH = document.getElementById('myH'); 
    myH.onclick = function() { 
     if (count % 2 == 1) { 
      myH.innerHTML = 'count is odd!'; 
     } else { 
      myH.innerHTML = 'count is even'; 
     } 
     count++; 
    }; 
};