javascript's document.getElementById возвращает null, но работает с консоли

Я попытался получить доступ и изменить свойства некоторого элемента из события onerror некоторого изображения. Но ... когда я загружаю страницу, я получаю Uncaught TypeError: Не могу вызвать метод ... из null. Я знаю, что обычно это происходит потому, что элемент еще не загружен.javascript's document.getElementById возвращает null, но работает с консоли

Я добавил задержку 10 секунд, используя setTimeout. Теперь я загрузил код и успешно достиг элемента через консоль (как в Chrome, так и в Firefox). Я получил сообщение TypeError.

Обратите внимание, что код из «onerror» отлично работает с консоли.

Я попытался сделать то, что хотел, по-другому: я попытался переопределить глобальную функцию из свойства «onerror» изображения. Но опять же: глобальная функция не изменилась. Это не вопрос времени, и код отлично работал с консолью (тот же код onerror, что он успешно переопределил глобальную функцию с консоли как в Chrome, так и в FF).

Я приведу здесь несколько примеров попыток я сделал (я переписан их быстро, надеюсь, без какой-либо опечатки):

<img src='' onerror='setTimeout(function(){document.getElementById(someElementString).addEventListener(clickString,function(){alert(1234);});},6000);' height=100 width=100 /> 

<img src='' onerror='function(){setTimeout(function(){document.getElementById(someElementString).addEventListener(clickString,function(){alert(1234);});},6000);};' height=100 width=100 /> 

<img src='' onerror='f = function(){setTimeout(function(){document.getElementById(someElementString).addEventListener(clickString,function(){alert(1234);});},6000);}; f();' height=100 width=100 /> 

<img src='' onerror='setTimeout(function(){window.globalFunction = function(e){alert(656565);};},6000);' height= 
200 width=100 />

я завернул OnError как функция, но без успеха.

Если я заменил код onerror простым предупреждением, он работает; И снова: он работает также с консоли, даже до запуска кода onerror.

В чем причина этого? Любая помощь будет оценена!

источник

2013-09-15 Gari BN

Это похоже на проблему с вашими строковыми кавычками. Вы должны использовать как одиночные, так и двойные кавычки.Измените цитату, которую вы используете вокруг 'someElement', для двойных кавычек' '' (Первая одинарная кавычка перед тем, как 'someElement' закрывает первую цитату, которая следует за' onerror') Ie '' – enhzflep

Второй - это безымянный (!). Я сомневаюсь, что он делает что-нибудь полезное, даже если оно помещено в консоль. – Bergi

Вы правы - так, как я его написал, это действительно не сработает. Это не проблема кавычек. 'и' click 'на самом деле являются строковыми объектами в моем коде (с более значимыми именами), поэтому единственные цитаты в начале и в конце. Я отредактирую свой вопрос. Спасибо! –

Похоже, вы поставили свой яваскрипта код в <head>

Если вы сделали это так, то вы положили весь код на window.onload событие, так что ваш код должен быть как ниже,

window.onload = function() { 
    var element = document.getElementById('element'); 
    element.addEventListener('click',function(){ 
     alert('You have clicked the element'); 
    }); 
};

источник

2013-09-16 06:03:48

Хорошо, я вижу, вы обновили свой вопрос. Хотя была проблема с представленными цитатами, это, как вы уже упоминали, не проблема.

Проблема связана с рядом вещей, которые я вижу.

1) Вы наполнили столько кода в 1 строку, что, похоже, потеряли все аргументы для каждой из функций. Например, вы забыли 3-й параметр для addEventListener. 2) Указание атрибута src для изображения, но, оставив его пустым, вызывает ошибку. Если установить это недопустимое имя файла позже в js, это приведет к тому, что функция ошибки будет срабатывать дважды - один раз при загрузке страницы, второй - при использовании нового недопустимого имени файла.

Вот сокращенное решение, которое делает то, что я думаю, вы хотите.

ОБНОВЛЕНО КОД:

заметить разницу в поведении между IMG 4 и 5. Вы можете нажать 5 немедленно изменить свою границу. img4, с другой стороны, вам нужно сначала подождать 3 секунды.

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function byId(e){return document.getElementById(e);} 

window.addEventListener('load', mInit, false); 

function initImage(idStr, imgSrc, errorCallback, successCallback) 
{ 
    byId(idStr).addEventListener('error', errorCallback, false); 
    byId(idStr).addEventListener('load', successCallback, false); 
    byId(idStr).src = imgSrc; 
} 

function mInit() 
{ 
    initImage('img1', 'doesntExist.png', errorFunc, successFunc); 
    initImage('img2', 'arduino.png', errorFunc, successFunc); 
} 

function errorFunc() 
{ 
    setTimeout(mFunc,3000); 
    var mElement = this; 
    function mFunc() 
    { 
     mElement.setAttribute('style','border-color: red'); 
     mElement.setAttribute('title', 'Error - image not found: "' + mElement.src + '"'); 
     mElement.addEventListener('click', function(){alert('The image didn\'t load!\nClicking aint gonna make it so, either!');}, false); 
    } 
} 

function successFunc() 
{ 
    setTimeout(mFunc,3000); 
    var mElement = this; 
    function mFunc() 
    { 
     mElement.setAttribute('style','border-color: green'); 
     mElement.setAttribute('title', '"' + mElement.src + '"'); 
     mElement.addEventListener('click', function(){ alert("succeeded"); }, false); 
    } 
} 

</script> 
<style> 
img 
{ 
    border: solid 4px transparent; 
} 
</style> 
</head> 
<body> 
    <img id='img1' height=100 width=100 /> 
    <img id='img2' height=100 width=100 /> 
    <img id='img3' src='doesntExistEither.png' height=100 width=100 onerror='func2();' /> 
    <img id='img4' src='doesntExistEither.png' height=100 width=100 onerror='setTimeout(function(){byId("img4").addEventListener("click", function(){byId("img4").setAttribute("style","border-color: purple;");}, false);}, 3000);' /> 
    <img id='img5' src='doesntExistEither.png' height=100 width=100 onerror='byId("img5").addEventListener("click", function(){byId("img5").setAttribute("style","border-color: purple;");}, false);' /> 
</body> 
</html>

источник

2013-09-16 06:45:06 enhzflep

Дело в том, что все код, включая создание функции, должен быть в коде onerror. Это своего рода хак ... Возможно, secon d проблема, о которой я говорил, более прост: у меня есть глобальная функция в разделе главы. У меня код onerror в img (вне головы); Я хочу переопределить глобальную функцию из кода onerror. Является ли это возможным? –

Не уверен в переопределении глобальной функции, у меня не было причин попробовать. Вы можете перезаписать некоторые vars/functions iirc, поэтому, я полагаю, все будет хорошо. Я обновляю свой ответ в один момент, чтобы добавить объявление изображения, соответствующее вашим. I. Всякий код является встроенной функцией в html. – enhzflep

javascript's document.getElementById возвращает null, но работает с консоли

ответ

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