【Javascript】特定のid付きのp要素をクリックする度にアラートする数字が増加(0にリセット可)

```html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>特定のid付きのp要素をクリックする度にアラートする数字が増加(0にリセット可)</title>
<style type="text/css">
</style>
</head>
<body>

<h2>特定のid付きのp要素をクリックする度にアラートする数字が増加(0にリセット可)</h2>

<p id="a01">ここをクリック</p>
<br/>
<p id="a02">リセット</p>

<script type="text/javascript">

function getElementID(nm){
  return document.getElementById(nm);
}

var click=click||{};

click.id_base=(function(){

    var that={};

    that.fire=function(s){

      var id=s.id,bullet=s.bullet,para=s.para,flg=s.flg,
          targetElement=getElementID(id),
          clickListener=function(){
              bullet(para);
          };

          if(!flg){

              //クリックイベント１つ目を登録
              targetElement.onclick=clickListener;

          }else{

              //クリックイベント2つ目以降を登録
              if(targetElement.addEventListener){
                  targetElement.addEventListener('click',clickListener,false);
              }else{
                  targetElement.attachEvent('onclick',clickListener);
              }

          }

    };

    return that;

})();

var Add_Alert=(function(){
    
    var that={};
    var my={};
    
    my.cnt=0;
    
    my.getcnt=function(){
      return my.cnt;
    };
    
    my.setcnt=function(a){
     my.cnt=a;
     return 0;
    };
    
    that.add=function(){
      var cnt=my.getcnt();
      alert(cnt);
      cnt+=1;
      my.setcnt(cnt);
    };
    
    that.reset=function(){
      if(my.setcnt(0)===0){
        alert("リセット完了");
      }
    };
    
    return that;
    
})();

window.onload=function(){
click.id_base.fire({id:"a01", bullet:Add_Alert.add});
click.id_base.fire({id:"a02", bullet:Add_Alert.reset});
}

</script>

</body>
</html>

```

##解説
特定のid付きのp要素をクリックする度にアラートする数字が増加するサンプルを作った。
アラートする数字を格納する変数をグローバル変数にすると簡単にできるが、このサンプルでは関数Add_Alert中のmyオブジェクトに変数cntを作り、この変数にアラートする数字を格納することでグローバル変数を使用せずに実現させている。

###追記###
@sounisi5011さんの指摘通りclick.id_base関数を改善した。

###追記2###

```js:
    var that={};
        that.click_id=click.click_id;
```

Add_Alert関数の中のthatオブジェクトにclick_idメソッドを作ってclick.click_idを継承して使うといい感じだな。
※id_baseからclick_idに名称を変更した.


```html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>特定のid付きのp要素をクリックする度にアラートする数字が増加(0にリセット可)</title>
<style type="text/css">
</style>
</head>
<body>

<h2>特定のid付きのp要素をクリックする度にアラートする数字が増加(0にリセット可)</h2>

<p id="a01">ここをクリック</p>
<br/>
<p id="a02">リセット</p>

<script type="text/javascript">

function getElementID(nm){
  return document.getElementById(nm);
}

var click=click||{};

click.click_id=(function(){

    var that={};

    that.fire=function(s){

      var id=s.id,bullet=s.bullet,para=s.para,flg=s.flg,
          targetElement=getElementID(id),
          clickListener=function(){
              bullet(para);
          };

          if(!flg){

              //クリックイベント１つ目を登録
              targetElement.onclick=clickListener;

          }else{

              //クリックイベント2つ目以降を登録
              if(targetElement.addEventListener){
                  targetElement.addEventListener('click',clickListener,false);
              }else{
                  targetElement.attachEvent('onclick',clickListener);
              }

          }

    };

    return that;

})();

var Add_Alert=(function(){
    
    var that={},my={};
        that.click_id=click.click_id;
    
    my.cnt=0;
    
    my.getcnt=function(){
      return my.cnt;
    };
    
    my.setcnt=function(a){
     my.cnt=a;
     return 0;
    };
    
    my.add=function(){
      var cnt=my.getcnt();
      alert(cnt);
      cnt+=1;
      my.setcnt(cnt);
    };
    
    my.reset=function(){
      if(my.setcnt(0)===0){
        alert("リセット完了");
      }
    };
    
    that.init=function(){
      this.click_id.fire({id:"a01", bullet:my.add});
      this.click_id.fire({id:"a02", bullet:my.reset});
    };
    
    return that;
    
})();

window.onload=function(){
Add_Alert.init();
}

</script>

</body>
</html>

```

##

##関連
[【Javascript】特定のid付きのdiv要素をクリックして特定の関数を実行させる][1]
[1]:http://qiita.com/kyoshiro-obj/items/1fd6615e9ab7da2e5b40