画像を押したらそれに対応する数字が出力する仕様にしたい

Question

<img src="aaa.jpg" onclick="number(1);">
<img src="bbb.jpg" onclick="number(2);">
<img src="ccc.jpg" onclick="number(3);">

function number(num) {
  console.log(num);
}

aaa.jgpを押すとコンソールに1が、bbb.jgpを押すと2が、ccc.jgpを押すと3が出力されるようにしたいです。しかし、画像を押してもコンソールには「Uncaught ReferenceError: number is not defined at HTMLImageElement.onclick」と表示されてしまいます。どうすればいいでしょうか。

ーーー＜追記＞ーーー
上では省略して書いていましたが、もう少し正確にコードを書きます。

<div class="main"></div>

var main = document.getElementsByClassName('main');

function imgAppear() {
  for(var i = 0; i < 6; i++) {
    var img = document.createElement('img');

    img.src = 'image' + i + '.jpg';
    img.setAttribute('onclick', 'number(' + i + ');');
    img.classList.add('img');
    main[0].appendChild(img);
  }
}

function number(num) {
  console.log(num);
}

imgAppear();

このJavaScriptの部分を…

(function() {
  'use strict';

  
})();

これで囲むとエラーが表示されるのが分かりました。これで囲まなければ、画像を押したときにちゃんと数字が表示されます。
なぜこれで囲むとエラーが出るのでしょうか？

Comments

[退会済みユーザー]

そのJavaScriptは正常に読み込まれていますか？あと、aaa.jgpではなくaaa.jpgですよね？？（タイプミス？）

Answer 1

numberを見える(グローバルな)ところに置いてください。
NGの例

(function() {
  function number(num) {
    console.log(num);
  }
})();

Comments

[ryoo_chksl]

そのNGの例だとなぜダメなのですか？

Answer 2

普通にできますが、、。
エラーは、imgエレメントのonclickで呼び出されたnumber関数が見つかりませんという意味合いです。

関数定義のところで、シンタックスエラーがあるか、<script>タグで囲まれていないなどの原因が考えられます。

<script>
  function number(num) {
  console.log(num);
}
</script>
<img src="aaa.jpg" onclick="number(1);">
<img src="bbb.jpg" onclick="number(2);">
<img src="ccc.jpg" onclick="number(3);">

Answer 3

JavaScriptの記載位置、または記載があるファイルの読み込み位置がheadにあったりしませんか？(要はhtml記述より前)

</body>の前に置くとほぼ確実にいけるはずです。

もう少し全体がわかるコードを提示いただくと再現確認および的確なアドバイスが可能となりますので、
追記いただければと。