javascriptがIEだけ動作しません

質問

javascript初心者です。

サイトに、ラジオボタンの選択に応じて、
値をテキストボックスに返す仕組みを作りたいと思っています。

Chrome,FireFox,Operaでは正しく動作していすが、
IEでは、テキストボックスのみ表示され、
ラジオボタンと選択肢が非表示になってしまいます。

お手数ですが、ご教示をお願いしたく、
よろしくお願いします。

<form>

<script type="text/javascript">

NoDHTML=(!document.all && !document.getElementById) || (navigator.userAgent.indexOf('Opera/6.')>=0) || (navigator.userAgent.indexOf('Opera 6.')>=0);

function changeMenu2(n) {
if (NoDHTML) return;
if (n==100) {
if (document.all) {
document.all['TNAME'].style.display='none';
document.all['TNAME2'].style.display='none';
}
else if (document.getElementById) {
document.getElementById('TNAME').style.display='none';
document.getElementById('TNAME2').style.display='none';
}
with(document.forms[0].TNAME) {
options.length=1;
options[0].text=''; options[0].value='';
}
document.forms[0].TNAME2.value='';
}
else {
if (document.all) {
document.all['TNAME2'].style.display='none';
document.all['TNAME'].style.display='none';
}
else if (document.getElementById) {
document.getElementById('TNAME2').style.display='none';
document.getElementById('TNAME').style.display='none';
}
if (n==0) {
document.forms[0].course_name.value='りんご';
document.forms[0].course_price.value='600円';
}
else if (n==1) {
document.forms[0].course_name.value='メロン';
document.forms[0].course_price.value='1000円';
}
else if (n==2) {
document.forms[0].course_name.value='マンゴー';
document.forms[0].course_price.value='5000円';
}
}
document.forms[0].TNAME.options[0].selected=true;
}

if (!NoDHTML) {
document.write(
' <label><input type="radio" name="TNAME2" onclick="changeMenu2(0);" onkeypress="return(true)" />リンゴ</label><br />'+
' <label><input type="radio" name="TNAME2" onclick="changeMenu2(1)" onkeypress="return(true)" />メロン</label><br />'+
' <label><input type="radio" name="TNAME2" onclick="changeMenu2(2);" onkeypress="return(true)" />マンゴー</label>'+
'<input type="hidden" name="course_name">'
);
}

</script>

<!-- ★★ここの部分はCSSで強制的に見えないようになっています -->

<select name="TNAME" id="TNAME" style="display:none !important;">
<option value="" selected="selected" style="display:none !important;"></option>
</select>

<!-- /★★ここの部分はCSSで強制的に見えないようになっています -->

<script type="text/javascript">
if (!NoDHTML) {
document.write(
'<input type="hidden" name="TNAME2" id="TNAME2" value="" size="20" />'
);
}
</script>

<br />
<br />
<br />

<!-- ★★ここに"course_priceの値が表示されます -->
<input type="text" name="course_price" readonly="readonly">
<!-- /★★ここに"course_priceの値が表示されます -->
</form>

回答No.1

bvltiggeari · ベストアンサー

こんばんわ！

何かIEでは特別な動作をしたいんでしょうか？
if(document.all)と判定する分にはまだいいですが
document.all['TNAME'].style.displayはあまりよくありません。
それは消してしまいましょう。

あと、idとnameが同名も、あまりいいとは言えません。
必要であれば仕方ないですが、今回は必要なさそうです。

ということで、以下のようにしてみてはいかがでしょう？

if (document.all) {
document.all['TNAME2'].style.display='none';
document.all['TNAME'].style.display='none';
}
else
を消す（2か所）

<input type="radio" name="TNAME2" onclick="changeMenu2…の
TNAME2をTNAME3とかに変える。（3か所）

お礼

ご教示いただいたとおりに修正したところ、正常に動作しました。
ご回答ありがとうございました。