コールバック関数

名前のない関数は、そのままでは使えません。

使うためには
①変数に入れる
②オブジェクトのプロパティに入れる▶メソッド
③関数の引数に入れる▶コールバック関数
④すぐに使う▶即時関数
このどちらかになります。

index.html

<div class="center">
      <div>
        <img src="images/Aくん.jpg" id="big">
      </div>
      <ul>
        <li><img src="images/bくん.jpg" class="img"></li>
        <li><img src="images/cくん.jpg" class="img"></li>
      </ul>
    </div>

index.js

const img = document.querySelectorAll('img');
    img.forEach(function(item,index) {
      item.onclick = function() {
       document.getElementById('big').src =this.dataset.imag;
      }
    });

反復メソッドを使った処理

コールバック関数をとり、配列のすべての要素に対して処理を行うメソッドです。
コールバック関数は引数に要素、位置、配列そのものを取ります。
コールバック関数に渡される値は、メソッド実行時の値になります。そして、コールバック関数が呼ばれるのは、値が代入済みの要素のみになります。
forEach(f)▶配列の各要素をコールバック関数functionで処理します。

また今回、クリックされたときにサムネイルを変更したいと思います。
イベント処理のため、item．onclickからコールバック関数を作ります！

クリックするとエラーnet::ERR_FILE_NOT_FOUND
Image (async)
item.onclick @ image.html:30

改修続ける。