[Vahan60]

Всем доброго времени суток.
Ниже приведен фрагмент кода азбуки.

let dial = document.getElementById("dial");
let but = document.getElementById("but");
let img = document.querySelectorAll(".img");

let activeUnit;

for (let i = 0; i < alphabet.length; i++){
      unit[i].addEventListener("click", function() {
	  activeUnit = i;
      dial.show();
   for (let j = 0; j < 3; j++) {
	  img[j].src = "cartoons/".concat(inset[activeUnit][j].concat(".png"))
          }
	  })   
   };  

 but.addEventListener("click", function() {
      dial.close();
});

let small = document.querySelectorAll(".small");
let sound = document.createElement("audio");

for (let j = 0; j < alphabet.length; j++){
      small[j].addEventListener ("click", function(){ // [B]Uncaught TypeError: Cannot read property 'addEventListener' of undefined [/B]
	  sound.src = "audio/".concat(inset[activeUnit][j].concat(".mp3")); 
	  sound.play()
	  })   
   };

Скрипт работает штатно, делает то, что и планировалось:

1. по клику на букву
1.1 выводит на экран диалоговое окно;
1.2 размещает в нем 3 картинки;
2. по клику на картинку озвучивает что на ней нарисовано;
3. по клику на "Х" закрывает диалоговое окно.

И далее по кругу.

Вот только "есть ньюанс". Даже 2 ньюанса.

Первый: на строке 25 выдает "Uncaught TypeError: Cannot read property 'addEventListener' of undefined ". Какой такой эррор-меррор?! Код же работает.

Второй: при клике на первую букву азбуки (сразу после открытия программы в браузере), допустим "А", все работает нормально. А вот после закрытия диалогого окна и после клика на вторую букву, допустим "Б", диалоговое окно "мигает". То есть: на мгновение открываются картинки соответствующие букве "А" и только затем показываются картинки буквы "Б".

Подскажите, пожалуйста, в чем дело.