Как вывести изображение на страницу через js?
Здравствуйте, не знаю как правильно сформулировать вопрос, но суть такая. Нужно чтобы при выборе чекбокса с картинкой, и последующим нажатием на кнопку добавить, изображение добавлялось на страницу.
Вот мои потуги:
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 += ` $ ` > selectEntity.innerHTML = newDeck; >);Картинки добавляю через JS (знаю, что криво, косо):
let selectEntity = document.getElementById("selectEntity"), add = ""; for (let i = 1; i " /> `; > selectEntity.innerHTML = add;Простой 18 комментариев
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)
>)
>
let checkbox = document.querySelectorAll(‘checkbox’)Вадим, есть изображения, которые я использую, как checkbox, то есть при нажатии на картинку она checked, мне нужно сделать так, чтобы при выборе нескольких изображений и нажатии кнопки добавить, картинки добавлялись на страницу, в отдельный div блок.
//НАШЛИ ВСЕ ЧЕКБОКСЫ
let check = document.querySelectorAll(‘[type=»checkbox»]’)
//БЛОК ДЛЯ ВСТАВКИ ИЗОРАЖЕНИЙ
let block = document.getElementById(‘blockImg’)
//ВАРИАНТ 1 СМОТРИМ ВВЫБРАННЫЕ ЧЕКБОКСЫ
document.getElementById(‘btn’).onclick = () => block.childNodes.forEach(el => )
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 => )
arr.forEach(el => //СОЗДАЕМ НОВОЕ ИЗОБРАЖЕНИЕ НА КАЖДОЙ ИТЕРАЦИИ
let img = document.createElement(‘img’)
//ДОБАВЛЯЕМ АДРЕС ИЗОБРАЖЕНИЯ
img.setAttribute(‘src’, el)
//ВСИАВЛЯЕМ НОВОЕ ИЗОБРАЖЕНИЕ В НАЧАЛО БЛОКА
block.insertAdjacentElement(‘afterbegin’,img)
>)
arr = null
>
Алексей ВальтерСкот, все-таки немного не так я вас понял.
Выбираю картинки, которые уже являются чекбоксом и их я добавляю на страницу. В целом ваш код можно подстроить под мои цели, но единственное я не понимаю, как саму картинку из чекбокса выцепить
У вас изначально в value checkbox должен быть заложен url картинки.
Вы когда нажимаете на картинку она я так понимаю label к чекбоксу, вызываете событие onchange и передаете в функцию текущее событие event (делегирование событий в js, очень советую ознакомиться) в нем содержится именно то значение value которое вам необходимо, его то вы и записываете в массив или можете сразу создать изображение и вставить его в нужный блок.
В принципе вы вообще можете убрать чекбоксы и создать дата атрибут у картинки и работать с ним, это сократит ваш код. При клике на картинку вы сразу из дата атрибута можете получить значение которым будет адрес картинки
Смена картинок по нажатии на кнопку?
Добрый день, подскажите как найти или сделать так, чтобы при нажатии на кнопку менялись картинки (их 3).
Например, пользователь видит 1 картинку прочитал на ней что-то нажал на кнопку и ту 1 картинку заменяет 2 фотография вновь прочитал что-то, нажал на кнопку и 2 фотографию заменяет 3.
из кода ничего особенного
snippet
document.body.addEventListener('click', e => < if (!e.target.matches('button')) return document.querySelector('.pic img').src = e.target.dataset.src document.querySelectorAll('button').forEach(btn =>btn.classList.remove('active')) e.target.classList.add('active') >)
Сначала составляете массив из ваших картинок, туда вставляете пути к ним.
Далее объявляете кнопку и блок с картинкой куда будете вставлять путь
По клику на кнопку вставляете картинку и при каждом клике увеличиваете переменную на 1, если переменная равна или больше кол-во картинок — обнуляете
snippet
Вывод изображения при нажатии button
Здравствуйте, есть код ниже. Создал 2 кнопки зеленую и красную. Теперь хочу что бы при нажатии на зеленую кнопку рядом с ней появилась картинка №1, а при нажатии на красную кнопку картинка №1 исчезла и появилась картинка №2 возле красной кнопки.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
html lang="en"> head> meta charset="UTF-8"> link rel="stylesheet" type="text/css" href="css/my.css"> script src="Click button.js"> script> title>One testtitle> style> .green_button { background-image: url("img/Green Button.png"); /*цвет фона красной кнопки*/ width: 53px; /*размер кнопки по ширине*/ height: 59px; /*размер кнопки по высоте*/ } .red_button{ background-image: url("img/Red Button.png"); /* цвет фона зеленой кнопки */ width: 53px; /*размер кнопки по ширине*/ height: 59px; /*размер кнопки по высоте*/ } style> head> body> input type="button" id="clickred" class="red_button" onclick="redclick()" value="0">p> input type="button" id="clickgreen" class="green_button" onclick="greenclick()" value="1">p> h1 align="center" style="color: #000000">Тест №1h1> img src="img/T-1.jpg" alt="T-1" width="500" class="T-1"> body> html> Объект Image в JavaScript
Для работы с изображениями в JavaScript используется объект Image. Данный объект является очередным свойством объекта Document. И о том, как управлять изображениями через JavaScript, Вы узнаете из этой статьи.
Конструктор у объекта Image практически не используется (да и он классический). Методы у него присутсвуют (наследуются от объекта Object), но ничего интересного из себя не представляют. Поэтому в этой статье мы разберём самое важное в объекте Image — его свойства.
Прежде чем начать обрабатывать изображение необходимо его создать. Разумеется, создание происходит в HTML, поэтому знакомый Вам тег:
Теперь мы можем обратиться к этому объекту через JavaScript:
Как видите, обращение к объекту Image очень простое: сначала пишится объект Document, а затем его свойство с именем объекта Image (это имя мы задали в атрибуте «name«). В результате выполнения этого скрипта Вы увидите: «[object HTMLImageElement]«. Это сработал метод toString(), но, впрочем, забудьте, что я сейчас написал — это тема будущих статей.
ВНИМАНИЕ: Необходимо соблюдать очень важное правило: нельзя обращаться к тому, чего ещё не существует. Какой вывод из этого можно сделать? Очень простой: пока не создано изображение, его нельзя обрабатывать. То есть Вы не можете запустить приведённый здесь скрипт ДО того, как появилось изображение. На это очень часто напарываются новички, поэтому не забывайте, что прежде чем работать с чем-либо, необходимо для начала это создать.
Теперь переходим к свойствам. Начнём со свойства border. Данное свойство отвечает за размер рамки вокруг изображения. Разумеется, мы его можем и прочитать, и записать. Давайте изменим размер рамки нашего изображения:
Разумеется, есть два свойства, отвечающие за ширину и высоту изображения. Это свойства width и height объекта JavaScript. Давайте их выведем:
document.write(«Ширина изображения — » + document.img.width + «
«);
document.write(«Высота изображения — » + document.img.height);
И последнее свойство, которое мы рассмотрим — это src. Данное свойство отвечает за путь к картинке. И давайте с Вами решим такую задачу: есть картинка и есть кнопка. При нажатии на кнопку картинка меняется.
Теперь поясню, как работает данный скрипт. Сначала мы описываем саму функцию. Создаётся переменная flag. Это некий флаг, который переключается при смене изображения. Дальше идёт функция changeImage(), которая и занимается сменой изображения. Изображению присваивается тот путь к картинке, которому соответствует флаг. После смены изображения меняется и значение флага (чтобы в следующий раз было другое изображение). За пределами скрипта создаётся форма с одной кнопкой. Здесь обратите внимание на атрибут «onClick«. Этот атрибут отвечает за обработку события «Клик мыши по кнопке«. О событиях мы поговорим отдельно, но здесь достаточно понять принцип. В значении атрибута «onClick» стоит функция, которую надо выполнить при нажатии на кнопку. Таким образом, у нас и меняется изображение. Надеюсь, что понятно объяснил.
Остальные свойства объекта Image в JavaScript используется достаточно редко, поэтому я их опустил. А самое важное я Вам поведал. В следующей статье мы перейдём к следующему свойству объекта Document — объект Link.
Создано 20.10.2010 19:31:48
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 31 ):
У меня не получается, у меня вместо картинки в таблицах двух, типо инпута такое «Рисунок» в двух. Можете помочь чем-нибудь?