Javascript: почему на одной странице document.write ('id'). Style.display = 'block' работает, а на другой нет?

Question

Не знаю как это вообще может быть !!! У меня есть код:

<script type="text/javascript">
    function SHOW(){document.getElementById('11').style.display='block';}
</script>
<a href="javascript:SHOW();">show</a>
<div id="11" style="display:none;">Some text</div>

На одной странице этот скрипт работает так, как должно быть, а на другой он вообще не работает ...

Если это важно, я использую jQuery на обеих страницах.

Как это может быть?

Спасибо!

Answer 1

Поскольку вы сказали, что используете JQuery, как насчет использования JQuery?

CSS :

.hidden {
    display:none;
}

HTML :

<span id="show">Show text</span>
<div id="foobar" class="hidden">Some text</div>

JQuery

$(function(){
    $('#show').click(function(){
        $('#foobar').show();
    });
});

Демо: http://jsfiddle.net/rdBkF/

Answer 2

Виталий, тебе не нужно использовать JQuery для чего-то такого легкого, просто бесполезно тратить ресурсы.

Проблема кода, который вы только что дали, заключается в том, что идентификатор элемента равен «11», а атрибуты идентификатора должны всегда начинаться с символа или подчеркивания, а не с цифры.

Это может работать в некоторых браузерах, а в других - нет.

Моя рекомендация: использовать идентификатор, начинающийся с нижнего кода или символа a-z или A-Z, и после загрузки страницы зарегистрировать прослушиватель событий для элемента A.

window.addEventListener('load',
function()
{
    elementA   = document.getElemenById('IDOfTheelementA');
    elementDiv = document.getElemenById('IDOfTheelementDiv');
    elementA.addEventListener('click',
        function() { elementDiv.style.display = 'block'; },
        true);
}, true);