特定のクラス名を持つ全ての要素のクリック時の処理を指定

<script type="text/javascript">
window.onload = function () {
    var $sampleOutput = document.getElementById( "sampleOutput" );
    var $sampleAElements = document.getElementsByClassName( "sampleA" );
    for( var $i = 0; $i < $sampleAElements.length; $i++ ) {
        $sampleAElements[$i].onclick = function () {
            $sampleOutput.innerHTML = parseInt( $sampleOutput.innerHTML ) + 1;
        }
    }
    var $sampleBElements = document.getElementsByClassName( "sampleB" );
    for( var $i = 0; $i < $sampleBElements.length; $i++ ) {
        $sampleBElements[$i].onclick = function () {
            $sampleOutput.innerHTML = parseInt( $sampleOutput.innerHTML ) - 1;
        }
    }
}
</script>

<script type="text/javascript">

// ページ読み込み時に実行
window.onload = function () {

    // id属性値が「sampleOutput」である要素への参照を変数「$sampleOutput」に代入
    var $sampleOutput = document.getElementById( "sampleOutput" );

    // class属性値が「sampleA」である複数の要素への参照を配列変数「$sampleAElements」に格納
    var $sampleAElements = document.getElementsByClassName( "sampleA" );

    // 配列変数「$sampleAElements」の要素数分ループ処理
    for( var $i = 0; $i < $sampleAElements.length; $i++ ) {

        // クリックイベントにイベントハンドラをバインド
        $sampleAElements[$i].onclick = function () {

            // class属性値が「sampleA」である要素をクリックした時の処理
            $sampleOutput.innerHTML = parseInt( $sampleOutput.innerHTML ) + 1;

        }

    }

    // class属性値が「sampleB」である複数の要素への参照を配列変数「$sampleBElements」に格納
    var $sampleBElements = document.getElementsByClassName( "sampleB" );

    // 配列変数「$sampleBElements」の要素数分ループ処理
    for( var $i = 0; $i < $sampleBElements.length; $i++ ) {

        // クリックイベントにイベントハンドラをバインド
        $sampleBElements[$i].onclick = function () {

            // class属性値が「sampleB」である要素をクリックした時の処理
            $sampleOutput.innerHTML = parseInt( $sampleOutput.innerHTML ) - 1;

        }

    }
}
</script>