Catch22 - HTML ждет JS, JS ждет HTML

-1

Я новичок, пытающийся написать генератор отчетов JS/HTML на основе критериев, которые я отправляю в формате HTML. В конечном итоге план должен использовать PHP/mySQL для управления базой данных и возврата результатов, но пока я просто пытаюсь создать HTML/CSS/JS, и я застрял. Я приписывал функцию JS к кнопке в <body> как так:Catch22 - HTML ждет JS, JS ждет HTML

<input type="button" id="reportButton" value="Generate Report" onclick="showCriteria()">

Я включил скрипт в <head> следующим образом:

<script>var showCriteria = function(){ My JS code...}</script>.

Эта функция просто делает некоторые даты манипуляции и отображает результат в DIV на той же странице, как так:

document.getElementById("endDate").innerHTML = "to "+endDay+" "+endMonthName+" "+endYear;

Но я получаю Uncaught TypeError: Cannot set property 'innerHTML' of null. Поэтому я искал форум и обнаружил, что это иногда может быть вызвано не ожиданием загрузки окна. Поэтому я завернул сценарий следующим образом:

<script> window.onload = function() var showCriteria = function(){ My JS code...}

Это решило первоначальную ошибку, но тогда я получаю Uncaught ReferenceError: showCriteria is not defined

Похоже, я в Catch22. Я получаю первую ошибку, потому что скрипт работает до того, как окно загрузилось. Я исправляю это, ожидая, пока окно загрузится, только чтобы найти, что HTML ожидает, что мой скрипт определит мою функцию JS.

Любой совет с благодарностью получил.

Report Generator screenshot

Window.load script

источник

2015-12-23 JulesGru

Если вы не вызываете обработчик события нажатия кнопки, прежде чем загружать страницу (очевидно, маловероятно), проблема не в том, что DOM не загружен. Действительно ли элемент имеет атрибут 'id =" endDate "?? – Archer

Добавив 'window.onload', вы вывели функцию showCriteria из глобальной области. Вы не исправили предыдущую ошибку, вы только что создали другую. – user2867288

Да - элемент div имеет правильный идентификатор. – JulesGru

Вы почти получили решение. По крайней мере, у вас есть все правильные элементы.

window.onload = function() { 
    document.getElementById('reportButton').addEventListener('click', showCriteria); 
};

Это сделает так, чтобы кнопка не функционировала до тех пор, пока страница не будет готова.

Вы также должны удалить onclick с кнопки.

источник

2015-12-23 14:40:39

Не забывайте, что onclick необходимо удалить с помощью этого решения. – user2867288

Пробовал это и больше не получил ошибку, но функция showCriteria, похоже, не работает. Ничего не отображается в конце endDate (да, я правильно это сделал), и кнопка блокируется в режиме наведения/фокусировки, предполагая, что код остановился, когда я нажал (хотя я не получаю сообщение об ошибке на моей консоли Chrome). Я хотел бы показать вам код, но кажется, что в моем ответе есть ограничение на количество символов - это правильно? Должен ли я начать новый вопрос, чтобы показать вам код? – JulesGru

Вы можете уточнить свой вопрос с дополнительной информацией. –

Когда вы положили функцию showCriteria внутри window.onload, пожалуйста, убедитесь, что она доступна DOM, то есть window.showCriteria.

<script> 
window.onload = function() 
    window.showCriteria = function(){ My JS code...} 
...

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

window.onload = function() { 
    document.getElementById('reportButton').addEventListener('click', showCriteria); 
};

источник

2015-12-23 15:02:38

Tried 'window.showCriteria = function() {Мой JS-код ...}', но я получаю ту же ошибку 'Uncaught ReferenceError: showCriteria не определен'. – JulesGru

Существует старая лучшая практика поместить тег '

Catch22 - HTML ждет JS, JS ждет HTML

ответ

Смежные вопросы