Всем доброго времени суток.
Ниже приведен фрагмент кода азбуки.
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 ". Какой такой эррор-меррор?! Код же работает.
Второй: при клике на первую букву азбуки (сразу после открытия программы в браузере), допустим "А", все работает нормально. А вот после закрытия диалогого окна и после клика на вторую букву, допустим "Б", диалоговое окно "мигает". То есть: на мгновение открываются картинки соответствующие букве "А" и только затем показываются картинки буквы "Б".
Подскажите, пожалуйста, в чем дело.