JavaScriptの動かないコード (中級編) イベントハンドラに同じ関数を２回以上追加したい

連載目次へ

以下のJavaScriptコードが意図した動作をしないのは，なぜですか。（制限時間１分）

やりたい事：

• ボタン押下時に， 2 と表示する。
• そのために，０に１足す操作を２回行なう。

<input type="button" value="「2」と表示" id="my_button">

<!-- ここに表示されます -->
<div id="my_div"></div>

<script language="JavaScript">

// 初期化
var a = 0;

// a に１足して表示
function f(){
	a++;
	my_div.innerHTML = a;
}

// イベント追加用の関数
function addEvent( element, eventName, func ){  
	if ( element.addEventListener )
	{
		// Firefox
		element.addEventListener( eventName, func, false );
	}
	else if ( element.attachEvent )
	{
		// IE
		element.attachEvent( "on" + eventName, func );  
	}
}

// イベントを２個追加
addEvent( my_button, "click", f );
addEvent( my_button, "click", f );

</script>