Как вывести изображение на страницу через js?

Question

[elo-dev]

Здравствуйте, не знаю как правильно сформулировать вопрос, но суть такая. Нужно чтобы при выборе чекбокса с картинкой, и последующим нажатием на кнопку добавить, изображение добавлялось на страницу.
Вот мои потуги:

btn.addEventListener('click', function(){
    let inputNameDeck = document.querySelector('.nameDeck').value,
        selectedCheckBoxesArchetype = document.querySelectorAll('input.input_choiceDeckArchetype:checked'),
        checkedValuesArchetype = Array.from(selectedCheckBoxesArchetype).map(cb => cb.value),
        selectedCheckBoxesHero = document.querySelectorAll('input.checkBoxAnimals:checked'),
        checkedValuesHero = Array.from(selectedCheckBoxesHero).map(cb => cb.value);
        
        if(checkedValuesArchetype == '' || inputNameDeck == ''){
            alert("Укажите данные");
        } else {
            var deck = {
                archetype: checkedValuesArchetype,
                nameDeck: inputNameDeck,
                deckHero: checkedValuesHero,
            }
        }

    let newDeck = "";
    for (let value of Object.values(deck)) {
        newDeck += `
        <p class="img_deck">
            ${value}
         </p>
        `
      }
    selectEntity.innerHTML = newDeck;
});

Картинки добавляю через JS (знаю, что криво, косо):

let selectEntity = document.getElementById("selectEntity"),
    add = "";
    for (let i = 1; i <= 41; ++i) {
    add += `<li>
                <input type="checkbox" id="checkBoxAnimals${i}" value="${i}" />
                <label id="selectEntityImg" for="checkBoxAnimals${i}">
                    <img src="allEntity/entity${i}.png">
                </label>
            </li>`;
}
selectEntity.innerHTML = add;

Comments

[Вадим]

А помощь то Вам в чём нужна?

[elo-dev]

Вадим, нужна помощь с реализацией вывода изображения на страницу

[Вадим]

elo-dev, так вы же вон генерируете элементы списка с картинками и вставляете их через innerHTML.
Опишите конкретно что нужно, что не получается. В идеале сделать демку на jsfiddle

[Алексей ВальтерСкот]

ЕСЛИ Я ПРАВИЛЬНО ПОНЯЛ ВОПРОС, нужно сделать что то подобное
Если одному чекбоксу принадлежит одна картинка значение хранится в value чекбокса. Собираем их в коллекцию:
let checkbox = document.querySelectorAll(“[type=‘checkbox’]”)
Создаем пустой массив куда будем добавлять выбранные изображени.
let arr = []
Перебираем циклом:
chekbox.forEach(e => {
//При выборе чекбокса добавляем в массив
e.onchange = function(event){
arr.push(event.target.value)
}
})
Потом слушаем кнопку при нажатии на которую нужно добавить выбранные картинки:
document.getElementById(“btn”).onclick = () => {
arr.forEach(el => {
//на каждой итерации создаем новый элемент
let img = document.createElement(“img”)
//добавляем адрес картинки
img.setAttribute(‘src’, el)
//вставляем в нужный блок
document.getElementById(“block”). insertAdjacentHTML(“afterBegin”, img)
})
}

[elo-dev]

Алексей ВальтерСкот, чтобы их перебрать коллекцию, вроде нужно вот так писать

let checkbox = document.querySelectorAll(‘checkbox’)

Но все равно в массив ничего не уходит, остается пустым

[elo-dev]

Вадим, есть изображения, которые я использую, как checkbox, то есть при нажатии на картинку она checked, мне нужно сделать так, чтобы при выборе нескольких изображений и нажатии кнопки добавить, картинки добавлялись на страницу, в отдельный div блок.

[Вадим]

elo-dev, если до завтра не ответят и будет актуально для вас, то я гляну еще раз завтра

[Алексей ВальтерСкот]

elo-dev, сейчас наваяю скину код. Вопрос я правильно понял?

[elo-dev]

Алексей ВальтерСкот, да

[elo-dev]

Вадим, Буду признателен

[Алексей ВальтерСкот]

Пример видео как работает:

https://drive.google.com/file/d/1CNb4d8DIKbQ-7Nytm...

//НАШЛИ ВСЕ ЧЕКБОКСЫ
let check = document.querySelectorAll('[type="checkbox"]')
//БЛОК ДЛЯ ВСТАВКИ ИЗОРАЖЕНИЙ
let block = document.getElementById('blockImg')

//ВАРИАНТ 1 СМОТРИМ ВВЫБРАННЫЕ ЧЕКБОКСЫ
document.getElementById('btn').onclick = () => {
block.childNodes.forEach(el => {el.remove()})
check.forEach(e => {
if (e.checked === true) {
//СОЗДАЕМ НОВОЕ ИЗОБРАЖЕНИЕ НА КАЖДОЙ ИТЕРАЦИИ
let img = document.createElement('img')
//ДОБАВЛЯЕМ АДРЕС ИЗОБРАЖЕНИЯ
img.setAttribute('src', e.value)
//ВСТАВЛЯЕМ НОВОЕ ИЗОБРАЖЕНИЕ В НАЧАЛО БЛОКА
block.insertAdjacentElement('afterbegin', img)
}
})
}

//ВАРИАНТ 2 ЧЕРЕЗ МАССИВ
По событию onchange можно сразу в принципе добавлять в нужное место, но его потом не удалить если нужны какие то динамические изменения без переходов и обновлений то лучше сохранять массив и с ним работать, а если не заморачиваться то просто проверять по checked и вставлять, кода меньше, но лично мне массив нравится больше, можно контролировать порядок добавления элементов , и выводит он изображения в том порядке в котором пользователь их выбрал. Можно накапливать их в массиве, можно удалять и тд.
//СОЗДАЕМ ПУСТОЙ МАССИВ
let arr = []
//ПРОСЛУШИВАЕМ СОБЫТИЕ ВЫБОРА ЧЕКБОКСА
check.forEach(el => {
el.onchange = function (event) {
//ДОБАВЛЕМ ЗНАЧЕНИЕ ВЫБРАННОГО ЧЕКБОКСА В МАССИВ
arr.push(event.target.value)
}
})


document.getElementById('btn').onclick = () => {
//ЕСЛИ ДО ЭТОГО БЫЛИ ДОБАВЛЕНЫ ИЗОБРАЖЕНИЯ УДАЛЕМ ИХ
block.childNodes.forEach(el => {el.remove()})
arr.forEach(el => {
//СОЗДАЕМ НОВОЕ ИЗОБРАЖЕНИЕ НА КАЖДОЙ ИТЕРАЦИИ
let img = document.createElement('img')
//ДОБАВЛЯЕМ АДРЕС ИЗОБРАЖЕНИЯ
img.setAttribute('src', el)
//ВСИАВЛЯЕМ НОВОЕ ИЗОБРАЖЕНИЕ В НАЧАЛО БЛОКА
block.insertAdjacentElement('afterbegin',img)
})
arr = null
}

[elo-dev]

Алексей ВальтерСкот, все-таки немного не так я вас понял.

Выбираю картинки, которые уже являются чекбоксом и их я добавляю на страницу. В целом ваш код можно подстроить под мои цели, но единственное я не понимаю, как саму картинку из чекбокса выцепить

[Алексей ВальтерСкот]

У вас изначально в value checkbox должен быть заложен url картинки.
Вы когда нажимаете на картинку она я так понимаю label к чекбоксу, вызываете событие onchange и передаете в функцию текущее событие event (делегирование событий в js, очень советую ознакомиться) в нем содержится именно то значение value которое вам необходимо, его то вы и записываете в массив или можете сразу создать изображение и вставить его в нужный блок.
В принципе вы вообще можете убрать чекбоксы и создать дата атрибут у картинки и работать с ним, это сократит ваш код. При клике на картинку вы сразу из дата атрибута можете получить значение которым будет адрес картинки

[elo-dev]

Алексей ВальтерСкот, а можете подробнее описать, как через data сделать

[Алексей ВальтерСкот]

elo-dev,
img id=“imgId” src=‘adress://url’ data-url=“adress://url”

script:
dicument.querySelectorAll(‘[data-url]’).onclick = function(event){
//Вот url картинки сохраняйте его, и работайте с этим значением
console.log(event.target.getAttribute(‘data-url’)
}

[elo-dev]

Алексей ВальтерСкот, у меня уже прогресс, что-то появляется, но url не тот.

[Алексей ВальтерСкот]

elo-dev, не очень понятно по изображению.

[Вадим]

elo-dev, Так как Вы не предоставили демки, в которой можно было бы Вам помочь, я набросал свою.