ラジオボタンの選択次第でフォームの一部を非表示にするjavascriptが動かない

前提・実現したいこと

javascriptを使い、ラジオボタンの選択内容に従ってフォームの一部を非表示にする

発生している問題・エラーメッセージ

スクリプトが動かず、ラジオボタンをチェックしてもページに変化がありません。
onlordも実行されていません。
なぜ動かないのか、教えていただけたら大変助かります。よろしくお願いいたします。

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf=8"> <meta name="keywords"content=""> <meta name="description"content=""> </head> <body> <form name="hoge" action="post.php" method="post"> <table> <tr> <th>内容</th> <td> <input type="radio" name="type" value="お問合せ" onclick="appear1();">お問合せ <input type="radio" name="type" value="ご予約" onclick="appear1();">ご予約 <input type="radio" name="type" value="メニュー" onclick="appear1();" checked>メニューが見たい</td> </tr> <tr id="hogehoge"> <th>ご利用は</th> <td> <input type="radio" name="times" value="初回" checked>初めて <input type="radio" name="times" value="リピート">２度目以降</td> </tr> <tr id="hugahuga"> <th>メールアドレス</th><td><input type="email" name="email" value=""></td> </tr> <tr> <th>メニュー</th> <td>

<input type="checkbox" name="unknown" value="未定">未定

<dl> <dt>A</dt> <dd><input type="checkbox" name="aa" value="aaa">aaa</dd> <dt>B&C</dt> <dd><input type="checkbox" name="bb" value="bbb">bbb</dd> <dd><input type="checkbox" name="CC" value="ccc">ccc</dd> </dl> </td> </tr> <tr id="piyopiyo"> <th>自由記入欄</th><td><textarea name="free"></textarea></td> </tr> </table> <div> <input type="submit" value="送信"> 確認画面はありません。 </div> </form> <script> function appear1(){ var form = document.forms.hoge; var Type = form.type.value; if ( Type == "メニュー"){ document.getElementById('hogehoge').style.display = 'none'; document.getElementById('hugahuga').style.display = 'none'; document.getElementById('piyopiyo').style.display = 'none'; ); }else if (Type == "お問合せ"){ document.getElementById('hogehoge').style.display = 'none'; ); }else if (Type == "ご予約"){ ; //何もしない } window.onload = appaer1; </script> </body> </html>

試したこと

１

関数化していない下記だけならきちんと実行されて該当IDのTrが見えなくなります。

document.getElementById('hogehoge').style.display = 'none';
document.getElementById('hugahuga').style.display = 'none';
document.getElementById('piyopiyo').style.display = 'none';

２

そして、下記も動いたので、onclickで値は取得できてるとおもいます。

function appear1(){
var form = document.forms.hoge;
document.write(form.type.value);
}
結果→(ページ全体が書き換えられて)選択したラジオボタンのvalue値が表示される

３

すっきりさせたくて試した、これは動きませんでした。getElementByClassがあればいいのですが。

menu = new Array(
document.getElementById('hogehoge'),
document.getElementById('hugahuga'),
document.getElementById('piyopiyo'),
);
menu.style.display = 'none';

補足情報（FW/ツールのバージョンなど）

プログラミング素人ですが自分のHPを作りたくてHTML，JavaScript,phpなどを用途に応じて並行して学んでいます。
なので、普通やらない書き方をしてしまっていたら申し訳ないです。よろしくお願いします。
勉強したいので、JQueryなどは使わない方針です。
terapadとxamppを使い、EdgeとChromeでテストしています。
このファイルはphpファイルです。