Кастомный select не видит img

Question

<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

Непонятно, зачем такие сложности с формированием заменяемого содержимого... У .select__item и .select__current одинаковая структура, поэтому логично её переносить полностью:

let select = document.querySelector('.select');
let header = document.querySelectorAll('.select__header');
let item = document.querySelectorAll('.select__item');

header.forEach(i => {
  i.addEventListener('click', function() {
    this.parentElement.classList.toggle('active');
  })
})

item.forEach(i => {
  i.addEventListener('click', function() {
    select.querySelector('.select__current').innerHTML = this.innerHTML;
    select.classList.remove('active');
  })
})

.select {
  width: 110px;
  position: relative;
}

.select__header {
  border: 1px solid #ccc;
  cursor: pointer;
  display: flex;
}

.select__current {
  font-size: 18px;
  padding: 8px;
}

.select img {
  width: 30px;
}

.select__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  height: 40px;
  width: 15px;
  margin-left: auto;
}

.select__icon img {
  width: 10px;
}

.select__body {
  display: none;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  position: absolute;
  top: 100%;
  background-color: #fff;
}

.select__item {
  line-height: 24px;
  padding: 8px;
  font-size: 16px;
  cursor: pointer;
}

.select__item:hover {
  background-color: #ccc;
}

.select.active .select__body {
  display: block;
}

<div class="select">
  <div class="select__header">
    <span class="select__current"><img src="https://img.freepik.com/free-icon/russia_318-454500.jpg?size=626&ext=jpg" alt="">+7</span>
    <span class="select__icon"><img src="https://img.freepik.com/free-icon/keyboard-right-arrow-button_318-76510.jpg?size=626&ext=jpg" alt=""></span>
  </div>
  <div class="select__body">
    <div class="select__item"><img src="https://img.freepik.com/free-icon/russia_318-454500.jpg?size=626&ext=jpg" alt="">+7</div>
    <div class="select__item"><img src="https://img.freepik.com/free-icon/united-states_318-209856.jpg?size=626&ext=jpg" alt="">+1</div>
    <div class="select__item"><img src="https://img.freepik.com/free-icon/turkey_318-454609.jpg?size=626&ext=jpg" alt="">+90</div>
  </div>
</div>

БЛОГ НА HUSL

Кастомный select не видит img

Ответы (1 шт):