Uncaught TypeError: Не удается прочитать свойство addEventListener из null в addEventListener [duplicate]
Я думаю, что это должно сделать трюк. Я просто добавил if(isset и добавил конкатенацию к переменным в теле, чтобы отделить PHP от HTML.
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: yoursite.com';
$to = 'contact@yoursite.com';
$subject = 'Customer Inquiry';
$body = "From:" .$name."\r\n E-Mail:" .$email."\r\n Message:\r\n" .$message;
if (isset($_POST['submit']))
{
if (mail ($to, $subject, $body, $from))
{
echo '<p>Your message has been sent!</p>';
}
else
{
echo '<p>Something went wrong, go back and try again!</p>';
}
}
?>
6 ответов
Элемент, который вы пытались найти, не был в DOM , когда ваш скрипт работал.
Позиция вашего DOM-зависимого скрипта может оказать глубокое влияние на его поведение. Браузеры анализируют HTML-документы сверху донизу. Элементы добавляются в DOM, и сценарии выполняются (как правило), когда они встречаются. Это означает, что порядок имеет значение. Как правило, скрипты не могут найти элементы, которые появляются позже в разметке, потому что эти элементы еще не добавлены в DOM.
Рассмотрим следующую разметку; сценарий # 1 не находит <div>, а сценарий # 2 преуспевает:
<script>
console.log("script #1: %o", document.getElementById("test")); // null
</script>
<div id="test">test div</div>
<script>
console.log("script #2: %o", document.getElementById("test")); // <div id="test" ...
</script>Итак, что вы должны делать? У вас есть несколько вариантов:
Вариант 1: Переместите свой скрипт
Переместите свой скрипт дальше по странице, перед закрывающим тегом тела. Организованный таким образом остальная часть документа анализируется до того, как будет выполнен ваш скрипт:
<body>
<button id="test">click me</button>
<script>
document.getElementById("test").addEventListener("click", function() {
console.log("clicked: %o", this);
});
</script>
</body><!-- closing body tag -->Примечание: размещение скриптов внизу как правило, считается лучшей практикой .
Вариант 2: jQuery's ready()
Отмените свой сценарий до тех пор, пока DOM не будет полностью проанализирован, используя ready() :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#test").click(function() {
console.log("clicked: %o", this);
});
});
</script>
<button id="test">click me</button> Примечание. Вы можете просто привязать к DOMContentLoaded или window.onload, но у каждого есть свои оговорки. jQuery ready() предоставляет гибридное решение.
Вариант 3: Делегирование событий
Делегированные события имеют преимущество в том, что они могут обрабатывать события из элементов-потомков, которые будут добавлены в документ позже.
Когда элемент вызывает событие (при условии, что это bubbling g6], и ничто не останавливает его распространение), каждый родитель в родословной этого элемента также получает событие. Это позволяет нам привязать обработчик к существующему элементу и примерным событиям, когда они пузырятся от его потомков ... даже те, которые добавлены после присоединения обработчика. Все, что нам нужно сделать, это проверить событие, чтобы узнать, был ли он поднят нужным элементом и, если да, запустите наш код.
jQuery
on()выполняет эту логику для нас. Мы просто предоставляем имя события, селектор для желаемого потомка и обработчик событий:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(document).on("click", "#test", function(e) { console.log("clicked: %o", this); }); </script> <button id="test">click me</button>Примечание: Обычно этот шаблон зарезервированы для элементов, которые не существовали во время загрузки или , чтобы избежать прикрепления большого количества обработчиков. Также стоит отметить, что, пока я прикреплял обработчик к
document(для демонстрационных целей), вы должны выбрать ближайшего надежного предка.
Вариант 4: Атрибут
deferИспользуйте атрибут
deferв<script>.[
defer, логический атрибут] установлен для указания на браузера, который должен выполняться после того, как документ был проанализирован.
<script src="https://gh-canon.github.io/misc-demos/log-test-click.js" defer></script> <button id="test">click me</button>Для справки, вот код из этого внешнего скрипта :
document.getElementById("test").addEventListener("click", function(e){ console.log("clicked: %o", this); });Примечание: атрибут
defer, безусловно, кажется , как волшебная пуля , но важно знать об оговорках ... 1.deferможет использоваться только для внешних скриптов, т. е. для тех, у кого есть атрибутsrc. 2. знать о поддержке браузера , то есть: ошибка реализации в IE & lt; 10
Если элемент, к которому вы пытаетесь получить доступ, находится внутри iframe, и вы пытаетесь получить к нему доступ за пределами контекста iframe, это также приведет к сбою.
Если вы хотите получить элемент в iframe, вы можете узнать, как здесь .
Как отметил @FelixKling, наиболее вероятным сценарием является то, что узлы, которые вы ищете, еще не существуют.
Однако современные методы разработки часто могут манипулировать элементами документа за пределами дерева документов либо с DocumentFragments, либо просто отсоединением / повторным подключением текущих элементов напрямую. Такие методы могут использоваться как часть шаблонов JavaScript или для предотвращения чрезмерных операций перерисовки / переплавки, в то время как элементы, о которых идет речь, сильно изменяются.
Аналогично, новая функциональность «Теневой DOM» развертывается в современных браузерах позволяет элементам быть частью документа, но не обрабатываться запросом document.getElementById и всеми его методами sibling (querySelector и т. д.). Это делается для инкапсуляции функциональных возможностей и, в частности, скрыть его.
Опять же, скорее всего, элемент, который вы ищете, просто (пока) в документе, и вы должны сделать, как предлагает Феликс , Тем не менее, вы также должны знать, что это все чаще является не единственной причиной того, что элемент может быть необоснованным (временно или постоянно).
Причины, почему селекторы на основе id не работают
- Элемент / DOM с указанным идентификатором еще не существует.
- Элемент существует, но он не является зарегистрированный в DOM [в случае, если HTML-узлы динамически добавляются из ответов Ajax].
- Присутствует более одного элемента с тем же идентификатором, который вызывает конфликт.
Решения
- Попробуйте получить доступ к элементу после его объявления или, альтернативно, использовать такие вещи, как
$(document).ready(); - . Для элементов, исходящих из ответов Ajax, используйте метод
.bind()для jQuery. В старых версиях jQuery для этого было.live(). - Используйте инструменты [например, плагин webdeveloper для браузеров], чтобы найти дубликаты идентификаторов и удалить их.
Попробуйте поместить document.getElementById в setTimeout()
Например.
setTimeout(function(){
console.log(document.getElementById('whatever'));
}, 100);
Если это сработает, тогда это просто проблема синхронизации.
-
1Это ненадежно. Это не проблема времени. См. Другие ответы здесь для объяснений реальных решений и . – Xufox 10 August 2018 в 14:05