script:
dicument.querySelectorAll(‘[data-url]’).onclick = function(event){
//Вот url картинки сохраняйте его, и работайте с этим значением
console.log(event.target.getAttribute(‘data-url’)
}
У вас изначально в value checkbox должен быть заложен url картинки.
Вы когда нажимаете на картинку она я так понимаю label к чекбоксу, вызываете событие onchange и передаете в функцию текущее событие event (делегирование событий в js, очень советую ознакомиться) в нем содержится именно то значение value которое вам необходимо, его то вы и записываете в массив или можете сразу создать изображение и вставить его в нужный блок.
В принципе вы вообще можете убрать чекбоксы и создать дата атрибут у картинки и работать с ним, это сократит ваш код. При клике на картинку вы сразу из дата атрибута можете получить значение которым будет адрес картинки
//НАШЛИ ВСЕ ЧЕКБОКСЫ
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
}
ЕСЛИ Я ПРАВИЛЬНО ПОНЯЛ ВОПРОС, нужно сделать что то подобное
Если одному чекбоксу принадлежит одна картинка значение хранится в 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)
})
}
Stalker_RED, Stalker_RED, я вот понять не могу, вас таких умных в школе по голове били что ска под каждым вопросом вы выебываетесь, или у пидорасов это врожденное?
Написано
Войдите на сайт
Чтобы задать вопрос и получить на него квалифицированный ответ.
