onerrorイベントが作動しない

前提・実現したいこと

javascriptの関数でコンソール上にonerrorを発生させたい。

発生している問題・エラーメッセージ

コンソール上にはエラーメッセージが表示されるが、
javascriptの関数で設定したログがコンソール上に表示されない。

practice.js:11 Uncaught TypeError: Cannot set property 'onerror' of null
    at practice.js:11
(anonymous) @ practice.js:11

該当のソースコード

javascript
1//5. onerror
2//*エラーが発生してからコンソールにメッセージが表示される
3"use strict";
4//5. onerror
5//*エラーが発生してからコンソールにメッセージが表示される。
6//var elem = document.getElementById("onerror");
7/*function createImg(){
8    var img = document.createElement('img');
9    img.onerror = console.log('リソースのロード中にエラーが発生しました。');
10    img.src = '4.jpg';
11    document.body.appendChild(img);
12}*/
13//document.getElementById('not-found-1').onerror = () => {
14//   console.log('画像が読み込めなかったよ');
15//};
16//5. onerror
17//*エラーが発生してからコンソールにメッセージが表示される
18var elem = document.getElementById("onerror");
19window.addEventListener("error", function(){
20    console.log('リソースのロード中にエラーが発生しました。');
21}, false);

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>JavaScript</title>
7</head>
8<body>
9  <p>JavaScript</p>
10  <script src="js/practice.js"></script><!--//フォルダ名jsの中のtask_event_1.jsというファイルを読み込む-->
11</body>
12</html>

試したこと

htmlのタグに直接onerrorを設定→これは成功
addEventListener関数でerrorを設定→質問と同様な失敗
などです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

maisumakun

2020/12/22 06:58

onerrorを「発生」させている箇所はどこでしょうか？

komattakomatta

2020/12/22 07:10 編集

onerrorを「発生」させている箇所は作って居ないです。該当するidが存在しないことから、errorが発生できると思ったため、あえて作らないようにしました。（追記） HTML上でどこに作ったのか、という意味でよろしかったでしょうか？

maisumakun

2020/12/22 07:10

逆に、ご提示のコードでは「Cannot set property 'onerror' of null」というエラーすら発生しないかと思うのですが、実際のコードとなにか違いはありますでしょうか？

komattakomatta

2020/12/22 07:50 編集

ご指摘いただき、ありがとうございます。このHTMLを読み込んでいるブラウザを更新したところ、コンソール上には何も表示されなくなりました。おそらく他に試したコードが残って居たのか、と思います。コードを修正いたしました。追記 maisumakun様ご指摘の意味を考えていたところ、とりあえずの解決方法を見つけました。ありがとうございました。

行動規範の内容に同意します

回答1件

自己解決

jsを以下のようにしたところ、コンソール上にonerrorで設定したconsole.logmを表示することができました。
変更前→
var elem = document.getElementById("onerror");
window.addEventListener("error", function(){
console.log('リソースのロード中にエラーが発生しました。');
}, false);
変更後→
var elem = document.getElementById("onerror");
window.addEventListener("error", function(){
console.log('リソースのロード中にエラーが発生しました。');
}, false);
elem.addEventListener("error", function(){
console.log('リソースのロード中にエラーが発生しました。');
}, false);