Почему вместо картинки возвращает underfined?

Question

[Fox 777]

<div class="select">
                                <div class="select__header">
                                    <span class="select__current"> <img src="./img/rus.jpg" alt=""> +7</span>
                                    <span class="select__icon"><img src="./img/Stroke.svg" alt=""></span>
                                </div>
                                <div class="select__body">
                                    <div class="select__item"><img src="./img/rus.jpg" alt="">+7</div>
                                    <div class="select__item"><img src="./img/usa.jpg" alt="">+1</div>
                                    <div class="select__item"><img src="./img/Flag_of_Turkey.svg.webp" alt="">+90</div>
                                </div>
                            </div>

.select{
    width: 110px;
    position: relative;
    img{
        width: 30px;
    }
    &__header{
        border: 1px solid #ccc;
        cursor: pointer;
        display: flex;
    }
    &__current{
        font-size: 18px; 
        padding: 8px;
    }
    &__icon{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        height: 40px;
        width: 15px;
        margin-left: auto;
        img{
            width: 10px;
        }
    }
    &__body{
        display: none;
        left: 0;
        right: 0;
        border: 1px solid #ccc;
        position: absolute;
        top: 100%;
        background-color: #fff;
    }
    &__item{
        line-height: 24px;
        padding: 8px;
        font-size: 16px;
        cursor: pointer;
        &:hover{
            background-color: #ccc;
        }
    }
}
.select.active .select__body{
    display: block;
}

let header = document.querySelectorAll('.select__header')
let item = document.querySelectorAll('.select__item')
let select = document.querySelector('.select')
let images = document.querySelectorAll('.select__item img')
header.forEach(i => {
    i.addEventListener('click', () => {
        i.parentElement.classList.toggle('active')
    })
})
item.forEach(i => {
    i.addEventListener('click', () => {
        images.forEach(el => {
            let text = images[el] + i.textContent,
                currentText = select.querySelector('.select__current')
            currentText.innerText = text
            select.classList.remove('active')
            console.log(images);

        })

    })
})

картинки флагов, при смене страны картинка underfined, не понимаю почему

Answer 1

[sharpsss]

Попробуй стиль для селект имг вот так обозначить select__item_img

Answer 2

[Procrastinationator]

Попробуй так

item.forEach(i => {
    i.addEventListener('click', el => {
        let text = el.target.textContent;
        let currentText = select.querySelector('.select__current');
        
        currentText.innerText = text;
        select.classList.remove('active');
    })
})

Comments

[Fox 777]

не получилось

[Procrastinationator]

Fox 777, Разве не такой должен быть результат? https://jsfiddle.net/628frdq0/

[Fox 777]

Procrastinationator, не знаю почему, но ссылка не открывается "Не удается получить доступ к сайту"

[Procrastinationator]

Fox 777, Странно, это обычная публичная ссылка на jsfiddle. У меня без проблем открывается в инкогнито.
Но по сути, получился такой JS:

let header = document.querySelectorAll('.select__header')
let item = document.querySelectorAll('.select__item')
let select = document.querySelector('.select')
let images = document.querySelectorAll('.select__item img')
header.forEach(i => {
    i.addEventListener('click', () => {
        i.parentElement.classList.toggle('active')
    })
})
item.forEach(i => {
    i.addEventListener('click', el => {
        let text = el.target.textContent;
        let currentText = select.querySelector('.select__current');
        
        currentText.innerText = text;
        select.classList.remove('active');
    })
})

В писочнице он работает без проблем, код страны переключается, никаких underfined.
Так же: я не совсем понял, зачем вам нужен был второй forEach, сделал на одном.

[Fox 777]

при выборе кода страны не выводит картинку
https://wampi.ru/image/RKDjqhg

Answer 3

[Stalker_RED]

ошибка здесь, непонимание как работает forEach
let text = images[el] + i.textContent