Установка стиля div на «none» или «block» с использованием javascript не работает в IE9, но работает в Chrome

0

У меня есть форма, которую я размещаю на веб-странице, и большинство моих пользователей будут использовать 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>

Этот код работает в Chrome, но в IE9 отображаемое изображение не изменяется при displayForm() функции javascript displayForm(). Есть ли что-то в style.display div style.display который отличается от IE9 и Chrome?

Теги:
google-chrome
internet-explorer-9

1 ответ

0

Если вам действительно нужна помощь, начните с поиска о том, почему ошибки IE с document.getElementByID

От: http://msdn.microsoft.com/en-us/library/ie/ms536437%28v=vs.85%29.aspx:

этот метод выполняет нечувствительность к регистру как атрибутов ID, так и NAME, что может привести к неожиданным результатам.

После прочтения некоторых об этом, подтверждая над <!doctype>, попробуйте заменить ваши "имя" и "идентификатор", чтобы они соответствовали, затем протестируйте его и вернитесь сюда с подробностями и информацией, чтобы мы могли больше помочь вам.

PostScriptum: когда я читаю это: "Я не знал, что языковой атрибут устарел из HTML 4", это было похоже на dang! Я откладываю свое время, пытаясь помочь кому-то, кто никогда не вырастет в карьере развития веб-интерфейса, не сделал бы свою домашнюю работу всем своим сердцем и, скорее всего, станет "копией-пастером", выходящим на Stackoverflow, сделайте это, потому что я не могу ".

Поделиться
  • 0
    Ошибка, по-видимому, не связана с document.getElementById (). Этот код:
  • 0
    Ошибка, по-видимому, не связана с document.getElementById (). Этот код: var a = document.getElementsByName ('search'); var b = document.getElementsByName ('searchBy'); кажется, дают два разных числа для a и b (в моем примере оба должны быть равны 3). В IE a = 0 и b = 3, а в Chrome a = b = 3, чего я и ожидал. «Имя» не является допустимым атрибутом в элементе <div>. Я нашел другой способ сделать это.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню