Простое скрытие / расширение с помощью Javascript - PullRequest
Новая
       51

Простое скрытие / расширение с помощью Javascript

1 голос
/ 01 января 2011

Я создал простой тестовый сценарий раскрытия / скрытия: 

<html>
<head>
<script type="type/javascript"><!--
function showHide(elementid){
    if (document.getElementById(elementid).style.display == 'none'){
        document.getElementById(elementid).style.display = '';
    } else {
        document.getElementById(elementid).style.display = 'none';
    }
}
//-->
</script>
</head>
<body>

<div><a href="javascript:showHide('div_1035677');">more...</a></div>

<div id="div_1035677" style="display:none">
HIDDEN CONTENT
</div>
</body>
</html>

Я получаю сообщение об ошибке, которое мне не понятно (объект ожидается в первой строке)Я не вижу никаких ошибок в приведенном выше коде.: - (

Ответы [ 5 ]

11 голосов
/ 01 января 2011

type="type/javascript" должно быть type="text/javascript".

5 голосов
/ 01 января 2011

Изменить type/javascript на text/javascript

Полный пример: 

<html>
<head>
  <script type="text/javascript" charset="utf-8">
  function showHide(elementid){
    if (document.getElementById(elementid).style.display == 'none'){
      document.getElementById(elementid).style.display = '';
    } else {
      document.getElementById(elementid).style.display = 'none';
    }
  }
  </script>
</head>
<body>
  <div><a href="javascript:showHide('div_1035677');">more...</a></div>
  <div id="div_1035677" style="display:none">
    HIDDEN CONTENT
  </div>
</body>
</html>
2 голосов
/ 01 января 2011

Ваш тип MIME для тега сценария неправильный, он должен быть text/javascript, а не type/javascript.

Браузеры будут игнорировать содержимое сценария с неизвестными типами MIME.

В действительности type атрибут не обязателен.Но если вы добавляете его, оно должно быть text/javascript, поскольку это единственное значение, распознаваемое всеми 3 основными браузерами.Как и в стандарте, правильный тип пантомимы для javascript - application/javascript, но не распознается IE. 

<script type="text/javascript">
    function showHide(elementid){
        if (document.getElementById(elementid).style.display == 'none'){
            document.getElementById(elementid).style.display = '';
        } else {
            document.getElementById(elementid).style.display = 'none';
        }
    }
</script>

Для дальнейшего чтения Должен ли я включить type = "text / javascript" в мои теги SCRIPT?

1 голос
/ 01 января 2011

Да, как уже говорили другие, вы должны использовать text / javascript, а не type / javascript. Кроме того, использование блоков CDATA не позволит валидатору HTML / XML (например, валидатору W3C HTML ) пометить JavaScript как неправильный. 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script type="text/javascript">
        //<![CDATA[
        function showHide(elementid){
            if (document.getElementById(elementid).style.display == 'none'){
                document.getElementById(elementid).style.display = '';
            } else {
                document.getElementById(elementid).style.display = 'none';
            }
        }
        //]]>
        </script>
    </head>

    <body>
        <div><a href="javascript:showHide('div_1035677');">more...</a></div>
        <div id="div_1035677" style="display:none;">
        HIDDEN CONTENT
        </div>
    </body>
</html>
0 голосов
/ 01 января 2011

Если вы установили тип на text/javascript, и он все еще не работает, это возможно потому, что элемент не загружен в DOM. Есть два способа решения проблемы:

  1. Переместите код Javascript под div следующим образом: 

    <div id="div_1035677" style="display:none">
  HIDDEN CONTENT
</div>
<script type="text/javascript">

  2. Обертка кода в обработчике события onload: 

    function showHide(){
  if (this.style.display == 'none'){
    this.style.display = '';
  } else {
    this.style.display = 'none';
  }
}


window.onload = function(){
  document.getElementById('link').onclick = showHide;
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...