<!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###
var that={};
that.click_id=click.click_id;
Add_Alert関数の中のthatオブジェクトにclick_idメソッドを作ってclick.click_idを継承して使うといい感じだな。
※id_baseからclick_idに名称を変更した.
<!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