Javascript: переменная ноль - PullRequest
Новая
       12

Javascript: переменная ноль

1 голос
/ 11 ноября 2008

У меня есть этот кусок Javascript, и он просто не будет работать. Я уже проверил JSlint, но это говорит, что все работает. Все еще не работает. Javascript находится не в HTML, а связан в <head>

примечание: я работаю с локальным сервером, поэтому загрузка страниц происходит мгновенно. 

function changeVisibility() {
    var a = document.getElementById('invisible');
    a.style.display = 'block';
}

var changed = document.getElementById('click1');
changed.onchange = changeVisibility;

Это соответствующий HTML 

<input type="file" name="click[]" size="35" id="click1" />
<div id="invisible" style="display: none;">
  <a href="javascript:addFileInput();">Attach another File</a>
</div>

Итак, что происходит, я нажимаю на вход, выбираю файл и утверждаю. Затем запускается событие onchange, и стиль моего невидимого div устанавливается равным block.

Проблема в том, что я получаю эту ошибку:

"изменено равно нулю: change.onchange = changeVisibility; "

Я не понимаю, я серьезно не понимаю, что я здесь пропускаю.

РЕДАКТИРОВАТЬ: ответ на вопрос, спасибо Mercutio за вашу помощь и всем, конечно, тоже. Конечный код: 

function loadEvents() {
    var changed = document.getElementById('click1');
    var a = document.getElementById('invisible');
    document.getElementById('addField').onclick = addFileInput;

    changed.onchange = function() {
        a.style.display = 'block';
    }
}
if (document.getElementById) window.onload = loadEvents;

Вот соответствующий HTML: 

<input type="file" name="click[]" size="35" id="click1" />
<div id="invisible" style="display: none;">
  <a href="#">Attach another File</a>
</div>

Также, спасибо за ссылку на JSbin , не знал об этом, выглядит изящно.

Ответы [ 5 ]

8 голосов
/ 11 ноября 2008

Похоже, что объект DOM не существует на момент обращения к нему. Возможно, измените код, чтобы он выполнялся после полной загрузки документа (или поместите JavaScript внизу вашей страницы)

примечание: я работаю с локальным сервером, поэтому загрузка страниц происходит мгновенно.

Это не проблема - составные части документа загружаются по порядку. Неважно, как быстро они загружаются, некоторые вещи происходят раньше других: D

Единственное, что я хотел бы сейчас сделать - это удалить ссылку Javascript из ...

Поместите туда идентификатор, и внутри вашей функции сделайте следующее: 

document.getElementById('addField').onclick = addFileInput;

Или, поскольку у вас уже есть div в качестве переменной 'a': 

a.firstChild.onclick = addFileInput;

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

1 голос
/ 11 ноября 2008

Mercutio правильно. Если этот код выполняется в HEAD, вызов document.getElementById ('click1') "всегда будет возвращать ноль, так как тело еще не проанализировано. Возможно, вам следует поместить эту логику в обработчик события onload.

0 голосов
/ 11 ноября 2008

Правильно, я изменил вещи, основываясь на ваших коллективных предположениях, и теперь это работает. Единственное, что меня беспокоит, так это прямая ссылка на Javascript внутри якоря

0 голосов
/ 11 ноября 2008

Я думаю, это потому, что вы пытаетесь изменить элемент файла.

Браузеры обычно не позволяют вам этого делать. Если вы хотите показать или скрыть их, поместите их в элемент div и покажите или скройте это.

0 голосов
/ 11 ноября 2008

Вам нужно обернуть свой код в обработчик событий window.onload, обработчик событий domReady (доступный в большинстве современных инфраструктур и библиотек js) или разместить в нижней части страницы.

Размещение в нижней части страницы работает нормально, как вы можете видеть здесь .

Отсоединение респондента от вашей разметки рассматривается в разделе «Ненавязчивый JavaScript» и может обрабатываться различными способами. В общем случае вы хотите объявить респонденты в событии window.onload или document.ready.

...