HTMLの任意画像クリック後、画像IDを取得するには

Question

HTMLに6個の画像を横並びに配置し、任意の画像をクリックしたときのsrc値を取得するのに、ループ処理で書くと動かないのはなぜでしょうか？
ちなみに、画像の数分onclick処理を書くと動きます。

  document.writeln('<label><img class="thumbnail" id="sm1" src="https://drive.google.com/uc?id=aaa" width="50" height="50"></label>');
  document.writeln('<label><img class="thumbnail" id="sm2" src="https://drive.google.com/uc?id=bbb" width="50" height="50"></label>');
  document.writeln('<label><img class="thumbnail" id="sm3" src="https://drive.google.com/uc?id=ccc" width="50" height="50"></label>');
  document.writeln('<label><img class="thumbnail" id="sm4" src="https://drive.google.com/uc?id=ddd" width="50" height="50"></label>');
  document.writeln('<label><img class="thumbnail" id="sm5" src="https://drive.google.com/uc?id=eee" width="50" height="50"></label>');
  document.writeln('<label><img class="thumbnail" id="sm6" src="https://drive.google.com/uc?id=fff" width="50" height="50"></label>');

  for(var i=1;i<7;i++){
    document.getElementById("sm"+i).onclick = function() {
      values.length = 0;
      values.push(document.getElementById("sm"+i).getAttribute("src"));
    };  
  }
  // for文だけではうまくsrc値が取得できず、以下画像の数分書かないのでしょうか？
  document.getElementById("sm1").onclick = function() {
    values.length = 0; // 配列を空にする
    values.push(document.getElementById("sm1").getAttribute("src"));
  };
  document.getElementById("sm2").onclick = function() {
    values.length = 0;
    values.push(document.getElementById("sm2").getAttribute("src"));
  };
  document.getElementById("sm3").onclick = function() {
    values.length = 0;
    values.push(document.getElementById("sm3").getAttribute("src"));
  };
  document.getElementById("sm4").onclick = function() {
    values.length = 0;
    values.push(document.getElementById("sm4").getAttribute("src"));
  };
  document.getElementById("sm5").onclick = function() {
    values.length = 0;
    values.push(document.getElementById("sm5").getAttribute("src"));
  };
  document.getElementById("sm6").onclick = function() {
    values.length = 0;
    values.push(document.getElementById("sm6").getAttribute("src"));
  };

Answer 1

少し前にあった別の方の質問と同じです。

Comments

[rena_168]

ありがとうございます。varとletがこんなに違うなんて初めて知りました！さすがです！

[m.ts10806]

あいや、そこじゃなくて。
変数のスコープをきちんと理解しないと、varをletに変えたところで他のところで必ず引っかかります。

[rena_168]

そうですか。。。私varをletに変えたら動きましたが、必ず引っかかるという意味が分からないですが、
教えていただけますか？