Картинку по клику делать фоном блока

@Zipper09 · Регистрация: 15.03.2018

Студворк — интернет-сервис помощи студентам

Здравствуйте.
Задача: Создайте div размерами ширина – 100%, высота 250px. Ниже добавьте 4-5 изображений с одинаковыми классами, разного размера. Добавьте событие, которое будет при клике на изображении устанавливать его фоном блока div со свойством background-size: contain.
Решение:

HTML5
1
2
3
4
5
<div id="main"></div>
    <img class="theSame" src="http://montessoriself.ru/wp-content/uploads/2017/09/VOLK.jpg">
    <img class="theSame" src="https://i.pinimg.com/originals/c6/cd/96/c6cd967b8606ebc462053c560bbef8ad.jpg">
    <img class="theSame" src="http://montessoriself.ru/wp-content/uploads/2017/09/OSEL.jpg">
    <img class="theSame" src="http://kak-do-ma.ru/img-q5y5x5n4g40414v5o4k4o4m506x5l4p4i4x5a4l4c4p2x5p4/wp-content/uploads/2017/09/NOSOROG.jpg">

JavaScript
1
2
3
4
5
6
7
8
9
10
    var main = document.getElementById('main');
    var theSame = document.getElementsByClassName('theSame');
[].forEach.call(theSame.function(el){
        el.addEventListener('click', function(e){
        if(e.target.tagName == 'IMG'){
            var src = e.target.getAttribute('src')
            main.style.backgroundImage = src;
        }
    })
})

Проблема: ругается и не воспринимает эту строчку - [].forEach.call(theSame.function(el)
Понимаю, что проще воспользоваться id, а не классами, но в задание написано работать с ними.
пробовал и так. пишет что "Cannot read property 'addEventListener' of null"

JavaScript
1
2
3
4
5
6
7
8
9
10
  var main = document.getElementById('main');
        var theSame = document.getElementById('.theSame');
    
        theSame.addEventListener('click', function(e){
        
        if(e.target.tagName == 'IMG'){
            var src = e.target.getAttribute('src')
            main.style.backgroundImage = src;
        }
        })

в чем ошибка, подскажите

@Aleksandrw · 10.04.2018, 16:47

Zipper09, не уверен, но возможно дело в том, что theSame - это массив и нужно обращаться к конкретному элементу по индексу.

Qwerty_Wasd · 10.04.2018, 19:34

Aleksandrw,

Сообщение от Aleksandrw

возможно дело в том, что theSame - это массив

почти. Это коллекция.
Zipper09,

Сообщение от Zipper09

var theSame = document.getElementById('.theSame');

точка лишняя.

Сообщение от Zipper09

main.style.backgroundImage = src;

неверно =>https://www.w3schools.com/jsre... dimage.asp
Вот ваш рабочий вариант - песочница

JavaScript
1
2
3
4
5
6
7
8
9
    var theSame = document.getElementsByClassName('theSame');
[].forEach.call(theSame,function(el){
        el.addEventListener('click', function(e){
        if(e.target.tagName == 'IMG'){
            var src = e.target.getAttribute('src')
            main.style.cssText = "background:url(" + src + ") no-repeat; \ background-size:contain";
        }
    })
})

А еще можно избавиться от цикла(а заодно и от глоб.переменных), делегировав событие родителю

JavaScript
1
2
3
document.body.onclick=function(e){
  if(e.target.tagName == 'IMG') main.style.cssText = "background:url("+e.target.getAttribute('src')+") no-repeat; \ background-size:contain"
}

@Zipper09 · 10.04.2018, 20:24 **[ТС]**

Qwerty_Wasd, спасибо Вы очень крутой!

Qwerty_Wasd · 10.04.2018, 21:19

Zipper09, да не за что

Сообщение от Zipper09

Вы очень крутой

поперхнулся маненько

Такой же новичек. Еще много чего не знаю.

Новые блоги и статьи Все статьи Все блоги /
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .
Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .

@Aleksandrw 39 / 38 / 26 Регистрация: 05.01.2018 Сообщений: 283
	10.04.2018, 16:47
	Zipper09, не уверен, но возможно дело в том, что theSame - это массив и нужно обращаться к конкретному элементу по индексу. 0

@Zipper09 0 / 0 / 0 Регистрация: 15.03.2018 Сообщений: 27
	10.04.2018, 20:24 [ТС]
	Qwerty_Wasd, спасибо Вы очень крутой! 0