0

Web ページに配置するフォームがあり、ほとんどのユーザーは IE を使用します。上部に一連のラジオ ボタンがあり、それらのいずれかが選択されると、下のフォームが変更されます。コードは次のとおりです。

<html>
<head>
<script language="javascript">
function prepareForm() {
  var t = document.getElementById('top');
  document.getElementById('search1').style.top = t.style.top + t.style.height;
  document.getElementById('search2').style.top = t.style.top + t.style.height;
  document.getElementById('search3').style.top = t.style.top + t.style.height;
}
function displayForm() {
  var a = document.getElementsByName('search');
  var b = document.getElementsByName('searchBy');
  for (i=0;i<a.length;i++) {
    if (!b[i].checked) {
      a[i].style.display="none";
    } else {
      a[i].style.display="block";
    }
  }
}
</script>
</head>
    <body style="font-family:calibri;text-align:center;" onLoad="displayForm();">
<div id="top">
<center><h3>My webpage</h3></center>
<br>
<form method="post" action="results.html" name='myForm'>
<center><font face='calibri'>Search By:</center><br>
<center>
<input type="radio" name="searchBy" value="search1" checked onClick="displayForm();">Form one
<input type="radio" name="searchBy" value="search2" onClick="displayForm();">Form two
<input type="radio" name="searchBy" value="search3" onClick="displayForm();">Form three
</div>

<!-- search area 1 -->
<div name="search" id="search1" style="margin-left:auto;margin-right:auto;display:block;">
<p>Form 1</p>
<input type="Submit" value="Submit">
</div>

<!-- search area 2-->
<div name="search" id="search2" style="margin-left:auto;margin-right:auto;display:none;">
<p>Form 2</p>
<input type="Submit" value="Submit"></b>
</div>

<!-- search area 3 -->
<div name="search" id="geoSearch" style="margin-left:auto;margin-right:auto;display:none;">
<p>Form 3</p>
</div>

</body>
</html>

displayForm()このコードは Chrome では動作しているように見えますが、IE9 では javascript 関数を呼び出しても表示が変わりません。style.displayIE9 と Chrome で異なるdiv の属性について何かありますか?

4

1 に答える 1