Question

我尝试从某些图像的onerror事件中访问和更改某些元素的属性。但是......当我加载页面时，我得到Uncaught TypeError：无法调用null的方法。我知道通常，这是因为元素尚未加载。

我使用setTimeout添加了10秒的延迟。现在，我加载了代码，并通过控制台（在Chrome和Firefox中）成功到达了元素。我得到了TypeError消息。

请注意，'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代码，它就可以工作;而且：它甚至可以在代码错误代码运行之前从控制台运行。

这可能是什么原因？任何帮助将不胜感激！

Answer 1

您似乎已将自己的javascript代码放在<head>

中

如果您这样做了，那么您已将所有代码放到window.onload事件中，因此您的代码应如下所示，

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

Answer 2

好的，我看到你已经更新了你的问题。虽然所提出的引号存在问题，但正如您所提到的那样，而不是问题。

问题来自我能看到的一些事情。

1）你已经把很多代码塞进了一行，你似乎忘记了每个函数的所有参数。例如，您已经忘记了addEventListener的第3个参数。 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>

javascript的document.getElementById返回null，但可以从控制台运行

2 个答案: