JavaScriptの質問をしたり答えたりする掲示板

javascript超初心者です
学校の課題で三段階ドロップダウンを作りたいのですが途中頭がこんがらがってしまい
三個目を表示する方法いただきたくご教示頂きたく。。。。

以下コードです

1段階目(メイン)のプルダウンメニュー
＜select class="mainselect">
＜option value="">メイン＜/option>
＜option value="a">A＜/option>
＜option value="b">B＜/option>
＜/select>
2段階目(サブ)のプルダウンメニュー
＜select id="A" class="subbox">
＜option value="">サブ＜/option>
＜option value="aa">A-A＜/option>
＜option value="ab">A-B＜/option>
＜option value="ac">A-C＜/option>
＜/select>
＜select id="B" class="subbox">
＜option value="">サブ＜/option>
＜option value="ba">B-A＜/option>
＜/select>
3段階目(サブサブ)のプルダウンメニュー
＜select id="aa" class="subsubbox">
＜option value="">サブサブ＜/option>
＜option value="aa1">A-A１＜/option>
＜/select>

＜script type="text/javascript">

・ サブBOXを全て非表示にする
var allSubBoxes = document.getElementsByClassName("subbox");
for( var i=0 ; i
allSubBoxes[i].style.display = 'none';
}

・ 全てのプルダウンボックスごとに処理
var mainBoxes = document.getElementsByClassName('pulldownset');
for( var i=0 ; i
var mainSelect = mainBoxes[i].getElementsByClassName("mainselect");
・ メインのプルダウンメニュー
var subSelect = mainBoxes[i].getElementsByClassName("subbox");
・サブのプルダウンメニュー
mainSelect[0].onchange = function () {
・ 同じ親要素に含まれている全サブBOXを消す
var subBox = this.parentNode.getElementsByClassName("subbox");
・ 同じ親要素に含まれる.subbox
for( var j=0 ; j
subBox[j].style.display = 'none';
}
・ 指定されたサブBOXだけを表示する
if( this.value ) {
var targetSub = document.getElementById( this.value );
・「メインのプルダウンメニューで選択されている項目のvalue属性値」と同じ文字列をid属性値に持つ要素を得る
targetSub.style.display = 'inline'
}
}
});
・この後サブで選択したサブサブのみstyleのdisplayのをinlineにしたいのですがどうしたらいいでしょうか。。。
＜/script>

Javascript初心者です。
現在次のようなことがしたいのですが、コードが動かずどなたか知恵をお貸しくださると大変助かります。

・カレンダーの日付（tdに含まれる文字(td class=calendar_td)をクリックした際に、とあるdiv(class=purposeselection)を可視化したい(現段階ではスタイルシートのvisibility=hiddenに設定)

・作ってみたコード
var purpose=document.getElementsByClassName("purposeSelection")
document.addEventListener("click", function(e) {
if(e.target.classList.contains("calendar_td")) {
purpose.style.visibility='visible';
}
})

ですが、動かずどこがいけないのやら、見当がつきません。。。
何卒よろしくお願いします。。。