Как заменить getElementById на класс?

Question

[bulkmaker]

Как заменить скрипт так, чтобы работал не с "id", а c "class"

<div class="product__image">
    <img class="product__image-small" src="images/universal_500.png" alt="500 мл"  onclick="myFunction(this);">
    <img class="product__image-small" src="images/universal_500-1.png" alt="500 мл"   onclick="myFunction(this);">
    <img class="product__image-small" src="images/universal_500-2.png" alt="500 мл"  onclick="myFunction(this);">
  </div>
<img class="product__image-big expandedImg" src="images/universal_500.png"  id="expandedImg"   >

скрипт:

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  expandImg.src = imgs.src;
  expandImg.parentElement.style.display = "block";
}

Comments

[Lord_Dantes]

getElementsByClassName

Answer 1

[Андрей Евдокимов]

document.querySelector(".expandedImg")

Comments

[bulkmaker]

работает, но если на странице несколько таких блоков меняется только у первого .expandedImg
что делать если на странице несколько таких?

<div class="product__image">
    <img class="product__image-small" src="images/universal_500.png" alt="500 мл"  onclick="myFunction(this);">
    <img class="product__image-small" src="images/universal_500-1.png" alt="500 мл"   onclick="myFunction(this);">
    <img class="product__image-small" src="images/universal_500-2.png" alt="500 мл"  onclick="myFunction(this);">
  </div>
<img class="product__image-big expandedImg" src="images/universal_500.png"  id="expandedImg"   >
<div class="product__image">
    <img class="product__image-small" src="images/universal_1.png" alt="1 л"  onclick="myFunction(this);">
    <img class="product__image-small" src="images/universal_1-1.png" alt="1 л"   onclick="myFunction(this);">
    <img class="product__image-small" src="images/universal_1-2.png" alt="1 л"  onclick="myFunction(this);">
  </div>
<img class="product__image-big expandedImg" src="images/universal_1.png"  id="expandedImg"   >

[artloveyou]

document.querySelectorAll() тогда, а потом forEach() для всех найденных

[artloveyou]

const elems = document.querySelectorAll('.product__image-small')
elems.forEach((elem) => {
    elem.onclick = function() {
    alert('Спасибо');
  };
})

а эти onclick="myFunction(this); из html поубирай

[bulkmaker]

artloveyou,

function myFunction(imgs) {
    const elems = document.querySelectorAll('.product__image-small')
    var expandImg = document.querySelector(".expandedImg");
    elems.forEach((elem) => {
        expandImg.src = imgs.src;
        expandImg.parentElement.style.display = "block";

    })
}

так не работает
может обернуть в див и заставить работать только внутри него ?

<div class="product__imagewrapper">
 <div class="product__image">
    <img class="product__image-small" src="images/universal_500.png" alt="500 мл"  onclick="myFunction(this);">
    <img class="product__image-small" src="images/universal_500-1.png" alt="500 мл"   onclick="myFunction(this);">
    <img class="product__image-small" src="images/universal_500-2.png" alt="500 мл"  onclick="myFunction(this);">
  </div>
 <img class="product__image-big expandedImg" src="images/universal_500.png"  id="expandedImg"   >
</div>

только я понимаю как сделать

[artloveyou]

Смотри, тут принцип такой: не надо вызывать onclick="myFunction(this);" в каждом элементе, надо собрать все необходимые элементы const elems = document.querySelectorAll('.product__image-small') и для каждого элемента по необходимости делать то что надо по клику

elem.onclick = function(){
        expandImg.src = imgs.src;
        expandImg.parentElement.style.display = "block";
}

Пример

[bulkmaker]

artloveyou,
пример не работает

const elemsparents = document.querySelectorAll('.product__imagewrapper')
  elemsparents.forEach((elemsparent) => {
    const elems = document.querySelectorAll('.product__image-small')
      elems.forEach((elem) => {
        elem.onclick = function () {
        alert('Спасибо');
    };
 })
})

вот так ?

[artloveyou]

bulkmaker, тогда вот тут у парента можно выбирать, если уже выбрал парента
const elems = elemsparent.querySelectorAll('.product__image-small'), только теперь не понятно зачем сначала парентов выбирать, опиши задачу. Я её пока так понял: есть несколько элементов с одинаковым классом, прин клике по любому из них вызываем функцию. Так?

const elemsparents = document.querySelectorAll('.product__imagewrapper')
  elemsparents.forEach((elemsparent) => {
    const elems = elemsparent.querySelectorAll('.product__image-small')
      elems.forEach((elem) => {
        elem.onclick = function () {
        alert('Спасибо');
    };
 })
})

[artloveyou]

Да вроде работает

[bulkmaker]

artloveyou, я имел ввиду что у меня пустая страница.

const elemsparents = document.querySelectorAll('.product__imagewrapper')
                        elemsparents.forEach((elemsparent) => {
                          const elems = elemsparent.querySelectorAll('.product__image-small')
                          const expandImg = document.querySelector(".expandedImg");
                          elems.forEach((elem) => {
                            elem.onclick = function () { 
                              expandImg.src = elem.src;
                              expandImg.parentElement.style.display = "block";

                            };
                          })
                        })

вот так тоже только меняет картинку только в первом блоке

[WbICHA]

artloveyou, ещё и гифку запилил... Тут же безнадёжный случай, если за него всю работу не сделаешь, он не успокоится.

[artloveyou]

WbICHA, не всегда так, кстати, я например помню как бывало тупил конкретно на том, что теперь кажется очевидным. У меня сегодня акция -- причинить добро. Он под неё попал)

[bulkmaker]

artloveyou,

тогда вот тут у парента можно выбирать, если уже выбрал парента
const elems = elemsparent.querySelectorAll('.product__image-small'), только теперь не понятно зачем сначала парентов выбирать, опиши задачу. Я её пока так понял: есть несколько элементов с одинаковым классом, прин клике по любому из них вызываем функцию. Так?

внутри .product__imagewrapper кликаем по .product__image-small и при клике внутри .product__imagewrapper ищем .expandedImg и подменяем src из .product__image-small. Т.е нужно чтобы он подменял имеено внутри своего .product__imagewrapper если их несколько на странице

[bulkmaker]

WbICHA, вы правы, знания отвратительные. Можете подсказать курсы?

[artloveyou]

bulkmaker, мое предложение такое - сформировать задачу. Как это сделать, перестать смотреть в код и написать: у меня есть два блока-парента, в каждом из них чилды, когда я кликаю на 1 чилда 1 парента то...

что должно произойти? (используя термины парент 1, парент 2, чилд 1 1, чилд 1 2 и т.д.

[artloveyou]

bulkmaker, https://learn.javascript.ru/ -- это про курсы, там есть видосы

внутри .product__imagewrapper кликаем по .product__image-small и при клике внутри .product__imagewrapper ищем .expandedImg и подменяем src из .product__image-small. Т.е нужно чтобы он подменял имеено внутри своего .product__imagewrapper если их несколько на странице

если вопрос так стоит, то заранее надо для .product__imagewrapper генерить (ну или вручную писать, я не знаю как ваш html код создается) id уникальный, чтобы работало "имеено внутри своего"

У меня дневной лимит коментов кончился, тут отвечу на этот коммент

у меня есть 2 блока парента, в них есть чайлды миникартинок и одна главная. при клике по миникартинкам главная картинка меняется на src из этого чайлда. Соответственно когда кликаем во втором блоке на миникартинки они подменяются во втором блоке. Сейчас при клике во втором блоке изображение меняется в первом. Блоков может быть больше 2-х

<div class="parent">
				<div class="mainChild" style="color: red">O</div>
			<div class="child">A</div>
			<div class="child">B</div>
			<div class="child">C</div>
		</div>
		<div class="parent">
				<div class="mainChild" style="color: red">O</div>
				<div class="child">D</div>
				<div class="child">E</div>
				<div class="child">F</div>
			</div>
			<div class="parent">
					<div class="mainChild" style="color: red">O</div>
					<div class="child">G</div>
					<div class="child">H</div>
					<div class="child">I</div>
			</div>
	</div>

const parents = document.querySelectorAll('.parent')
parents.forEach((parent) => {
  const mainChild = parent.querySelector('.mainChild')
  const children = parent.querySelectorAll('.child')

  children.forEach((child) => {
       const content = child.textContent
       child.onclick = () => {
         mainChild.innerHTML = content
       }
  })
})

Пример

[bulkmaker]

artloveyou,
у меня есть 2 блока парента, в них есть чайлды миникартинок и одна главная. при клике по миникартинкам главная картинка меняется на src из этого чайлда. Соответственно когда кликаем во втором блоке на миникартинки они подменяются во втором блоке. Сейчас при клике во втором блоке изображение меняется в первом. Блоков может быть больше 2-х

[bulkmaker]

artloveyou,
всё увидел const expandImg = documet.querySelector(".expandedImg"); поменял на const expandImg = elemsparent.querySelector(".expandedImg"); и заработало как надо.

const elemsparents = document.querySelectorAll('.product__imagewrapper')
                        elemsparents.forEach((elemsparent) => {
                          const elems = elemsparent.querySelectorAll('.product__image-small')
                          const expandImg = elemsparent.querySelector(".expandedImg");
                          elems.forEach((elem) => {
                            elem.onclick = function () {
                              expandImg.src = elem.src;
                              expandImg.parentElement.style.display = "block";
                           //   expandImg.src = elems.src;
                           //   expandImg.parentElement.style.display = "block";
                            };
                          })
                        })

Спасибо за помощь