Javascript: var имеет значение null
У меня есть этот фрагмент 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 устанавливается на блокировку.
Проблема в том, что я продолжаю получать эту ошибку:
"изменено - ноль: changed.onchange = changeVisibility; "
Я не понимаю, я серьезно не понимаю, что я здесь упускаю.
Обновлено: ответ на вопрос, спасибо Меркуцио за вашу помощь и, конечно же, всем остальным. Окончательный код:
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, не знал об этом, выглядит здорово.
Я отредактировал и вернул исходную задачу для будущих читателей.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Похоже, что объект DOM не существует на момент обращения к нему. Возможно, измените свой код, чтобы он выполнялся после полной загрузки документа (или поместите javascript внизу вашей страницы)
note: I am working with a local server, so pageload in instant.
Проблема не в этом - составные части документа загружаются по порядку. Неважно, насколько быстро они загружаются, одни вещи происходят раньше других: D
The onlything I'd like to do now is remove the Javascript link from the ...
Поместите туда идентификатор и внутри своей функции сделайте следующее:
document.getElementById('addField').onclick = addFileInput;
Или, поскольку у вас уже есть div в качестве переменной 'a':
a.firstChild.onclick = addFileInput;
Но это, очевидно, оставляет вам недопустимый тег привязки. Лучшая практика предполагает, что вы должны предоставить способ сделать это без javascript и переопределить эту функцию с помощью вашего javascript-метода, если он доступен.
Меркуцио, ты спасатель. Мой HTML теперь свободен от Javascript. Большое спасибо.
Вам нужно обернуть свой код в обработчик событий window.onload, обработчик событий domReady (доступен в большинстве современных js-фреймворков и библиотек) или разместить внизу страницы.
Размещение в нижней части страницы работает нормально, как вы можете видеть здесь.
Разделение ответчика на событие и разметки рассматривается в разделе «Ненавязчивый JavaScript» и может быть обработано различными способами. В общем, вы хотите объявлять ответчиков на события в событии window.onload или document.ready.
Я думаю, это потому, что вы пытаетесь изменить элемент файла.
Браузеры обычно не позволяют этого сделать. Если вы хотите показать или скрыть их, поместите их внутри div и покажите или скройте это.
это именно то, что я делаю. У меня есть ссылка, которая находится внутри div, который установлен как невидимый. Я хочу сделать так, чтобы при выборе файла для загрузки ссылка становилась видимой.
Я не думаю, что это так. Независимо от разрешений на ввод файла, var changed = document.getElementById ('click1'); возвращает NULL, что означает, что на данный момент нет элемента с id = "click1"
в общем, каждый раз, когда я что-то нажимаю или делаю что-то в HTML-файле, все значения переопределяются? Я знаю, как выполнять базовые команды в Javascript, но внутренняя работа и взаимодействие с HTML немного далеки от того, что я видел до сих пор, но мне нужна функциональность того, что я делаю.
Меркуцио прав. Если этот код выполняется в HEAD, вызов «document.getElementById ('click1')» всегда будет возвращать null, поскольку тело еще не было проанализировано. Возможно, вам следует поместить эту логику в обработчик события onload.
Хорошо, я изменил вещи на основе ваших коллективных мнений, и теперь это работает. Меня беспокоит только прямая ссылка на Javascript внутри якоря.
Редактирование вопроса и ЗАМЕНА исходного содержимого полностью уничтожили эту ветку для дальнейшего использования. Пожалуйста, помните об этом в будущем.