Почему код скрывает только первый блок в списке?

Question

[historydev]

Доброе утро.Скажите пожалуйста, как скрыть все блоки?

//Append quests in box

	box.innerHTML =

		`<div class='quests'>

			<div class='quests1'>${quest1}</div>
			<div class='answers'>
				<div class='answer'>-2</div>
				<div class='answer'>-1</div>
				<div class='answer'>0</div>
				<div class='answer'>1</div>
				<div class='answer'>2</div>
			</div>
			<div class='quests2'>${quest2}</div>

		</div>`

	const first_quest1 = document.querySelector(`.quest1[data-id='1']`),
		  first_quest2 = document.querySelector(`.quest2[data-id='1']`)


	//Hide quests
	document.querySelector('.quest1').style.display = 'none'
	document.querySelector('.quest2').style.display = 'none'

Comments

[Шохрух Шаймардонов]

Залейте в песочницу, гляну
UPD. С телефона сижу, поэтому сходу не смогу разобрать

[historydev]

Шохрух Шаймардонов, отходил, сейчас залью

[historydev]

Тык

[Шохрух Шаймардонов]

Владимир, так?

[historydev]

Шохрух Шаймардонов, нет-нет, это слишком очевидно, мне нужно именно все quest1 and quest2 скрывать

[alex]

Владимир, а если их 100 будет, вы так и будете писать

document.querySelector('.quest100').style.display = 'none'

?

[historydev]

Alex, это не порядковый номер, это один класс, порядковый номер я задаю в data-id,если вы об этом

Answer 1

[Шохрух Шаймардонов]

document.querySelectorAll('.quest1').forEach(quest => quest.style.display = 'none');
document.querySelectorAll('.quest2').forEach(quest => quest.style.display = 'none');

Comments

[historydev]

Да. сработало, спасибо, из той-же ямы вопрос, как мне добавить обработчик клика допустим ко всем элементам?

[historydev]

Вот так

document.querySelectorAll('.answer').forEach(ans => {

		ans.onclick = (e) => {

			// new Quest(1, e.target.innerHTML)

			console.log(e.target.innerHTML)

		}

	})

[historydev]

Спасибо большое, было познавательно

Answer 2

[BEKa T]

В html'е написал class="quests", а в js'е quest

<div class='quests1'>${quest1}</div>
      <div class='quests2'>${quest2}</div>

<code lang="javascript">
  //Hide quests
  document.querySelector('.quest1').style.display = 'none'
  document.querySelector('.quest2').style.display = 'none'
</code>

Comments

[historydev]

я пожалуй еще подожду)) Спасибо

[BEKa T]

Владимир, а что всеравно не работает?

[historydev]

Bred Thomson, мне не нужно скрывать весь блок вопросов, мне их перебирать нужно. А ваш код очень примитивен)

[BEKa T]

Владимир, когда перебираешь используй querySelectorAll

Answer 3

[Andrew]

Доброе утро.Скажите пожалуйста, почему скрывается только один блок?

Потому что querySelector выбирает первый и делает с ним, то что вы ему "скажете"
Если вы хотите чтобы вам показали как перебрать ваши блоки и скрыть нужные, то таки пишите в вопросе.

Comments

[historydev]

поправил, погуглю пока, спасибо

Answer 4

[sergey_n_ergy]

Если я правильно понял, то вам нужно использовать не querySelector, а querySelectorAll и в цикле скрывать все необходимые элементы. Либо скрывать вмещающий их контейнер.