0

我试图从某些图像的 onerror 事件中访问和更改某些元素的属性。但是...当我加载页面时，我得到 Uncaught TypeError: Cannot call method ... of null。我知道这通常是因为元素尚未加载。

我使用 setTimeout 添加了 10 秒的延迟。现在，我加载了代码，并通过控制台（在 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 代码运行之前。

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

4

2 回答 2

1

看起来您已将 javascript 代码放入<head>

如果你这样做了，那么你已经把你所有的代码都放到了 window.onload 事件中，所以你的代码应该如下所示，

window.onload = function() {
    var element = document.getElementById('element');
    element.addEventListener('click',function(){
        alert('You have clicked the element');
    });
};
于 2013-09-16T06:03:48.803 回答
0

好的，我看到你已经更新了你的问题。虽然所提供的报价存在问题，但正如您所提到的，这不是问题。

问题来自我可以看到的许多事情。

1) 你在 1 行中塞进了这么多代码，你似乎忘记了每个函数的所有参数。例如，您忘记了 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-16T06:45:06.447 回答