Как взять все элементы с одним классом, если используется поиск по массиву?

Question

[Mesuti]

Привет!

Есть input.
При вводе каждой цифре, происходи поиск и соответствие картинке (флаг страны).
Цифра:Флаг в массиве.

Как сделать выбор всех input и картинок с нужным классом? если input и картинок несколько
Песочница https://jsfiddle.net/Mesuti/j5hvaq9w/

\\\\\\\\\\\\\

Пробовал написать querySelectorAll - не работает, пишет addEventListener не функция.

<img src="" id="inputflag" class="inputflag">
<br>
<input type="text" value="1" id="inputcode" class="inputcode">

inputFlag = document.querySelectorAll('.inputflag');
    inputCode = document.querySelectorAll('.inputcode');

    const countries = [
        { code: '1', flag: 'https://i.ytimg.com/vi/qKYcC1nricU/maxresdefault.jpg' },
        { code: '2', flag: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Flag_of_Germany.svg/288px-Flag_of_Germany.svg.png' },
        { code: '3', flag: 'https://flagi.com.ua/wp-content/uploads/2015/10/flag_tjk.gif' }
    ];

    inputCode.addEventListener('input', checkCountry);
    window.onload = checkCountry;
    document.querySelectorAll('.inputcode').onclick = checkCountry;

    function checkCountry() {
        const country = countries.find(n => !inputCode.value.indexOf(n.code));
        inputFlag.src = country ? country.flag : '';
    }

Пробовал подключить jQuery, тоже не работает

<img src="" id="inputflag" class="inputflag">
<br>
<input type="text" value="1" id="inputcode" class="inputcode">

inputFlag = $('.inputflag');
    inputCode = $('.inputcode');

    const countries = [
        { code: '1', flag: 'https://i.ytimg.com/vi/qKYcC1nricU/maxresdefault.jpg' },
        { code: '2', flag: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Flag_of_Germany.svg/288px-Flag_of_Germany.svg.png' },
        { code: '3', flag: 'https://flagi.com.ua/wp-content/uploads/2015/10/flag_tjk.gif' }
    ];

    inputCode.addEventListener('input', checkCountry);
    window.onload = checkCountry;
    $('.inputcode').onclick = checkCountry;

    function checkCountry() {
        const country = countries.find(n => !inputCode.value.indexOf(n.code));
        inputFlag.src = country ? country.flag : '';
    }

Answer 1

[0xD34F]

Каждой паре input-картинка добавим общую обёртку:

<div class="country">
  <input class="country-code">
  <img class="country-flag">
</div>

Добавим параметр функции, обновляющей картинку - соответствующий картинке input. Из которого она прочитает код страны и через общего предка найдёт картинку:

function updateFlag(el) {
  const country = countries.find(n => !el.value.indexOf(n.code));
  el.closest('.country').querySelector('.country-flag').src = country ? country.flag : '';
}

Сделаем делегированный обработчик события input, если оно случилось на одном из картиночных input'ов, вызовем функцию обновления, передав ей целевой элемент:

document.addEventListener('input', function(e) {
  if (e.target.classList.contains('country-code')) {
    updateFlag(e.target);
  }
});

Чтобы при загрузке сразу были показаны картинки, вызовем функцию обновления для всех input'ов:

document.querySelectorAll('.country-code').forEach(updateFlag);

https://jsfiddle.net/z2u4sh7k/

Comments

[Mesuti]

Спасибо!