БЛОГ НА HUSL


Функция работает только после второго нажатие

Автор вопроса: Проста Miha

У меня есть функция и она не срабатывает сразу, только после второго нажатия

var quest=document.getElementsByClassName('quest');
		function quest1(){
			if(document.getElementById('quest1').style.display=='none'){
				document.getElementById('quest1').style.display='block';
			}
			else{
				quest[0].style.display='none';
			}
		}
		function quest2(){
			if(document.getElementById('quest2').style.display=='none'){
				document.getElementById('quest2').style.display='block';
			}
			else{
				quest[1].style.display='none';
			}
		}
		function quest3(){
			if(document.getElementById('quest3').style.display=='none'){
				document.getElementById('quest3').style.display='block';
			}
			else{
				quest[2].style.display='none';
			}
		}
		function quest4(){
			if(document.getElementById('quest4').style.display=='none'){
				document.getElementById('quest4').style.display='block';
			}
			else{
				quest[3].style.display='none';
			}
		}
*{
	margin: 0;
	padding: 0;
	font-family: 'Acme', sans-serif;
}

.recent-quest{
	position: absolute;
	margin: 1vw 10%;
	width: 80%;
	color: black;
}

h3{
	padding: .5vw 1vw;
	cursor: pointer;
	color: black;
}

h3:hover{
	color: red;
}

a{
	color: black;
}

.quest{
	margin-left: 5%;
	display: none;
}
<script src="https://kit.fontawesome.com/4fcf22c1ce.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Acme&display=swap" rel="stylesheet">
<div class="recent-quest" id="recent">
			<h2 align="center" style="color: black">&#206ntreb&#259ri frecvente</h2>
			<h3 onclick="quest1()"><i class="fas fa-caret-right"></i>Cum pot g&#259si site-ul pe Internet (Facebook, Instagram) ?</h3>
			<div class="quest q1" id="quest1"> 
				Pute&#355i s&#259 ne g&#259si&#355i pe <a href="https://www.facebook.com/">Facebook</a> sau <a href="https://www.instagram.com/">Instagram</a>. Acolo pute&#355i g&#259si toate informi&#355iile despre site-ul nostru &#351i despre ofertele speciale.
			</div>
			<h3 onclick="quest2()"><i class="fas fa-caret-right"></i>Cum putem achita produsul dorit?</h3>
			<div class="quest q2" id="quest2">
				Produsele pot fi achitate online, cu ajutorul cardului sau portofelului online (qiwi, webmoney), sau in numerar, curierului care v&#259 va aduce produsul dorit.
			</div>
			<h3 onclick="quest3()"><i class="fas fa-caret-right"></i>Cum putem primi produsul achitat?</h3>
			<div class="quest q3" id="quest3">
				Produsul poate fi trimis cu ajutorul unui curier sau luat personal de la unul din magazinele noastre.
			</div>
			<h3 onclick="quest4()"><i class="fas fa-caret-right"></i>Cum pot fi sugur &#238n calitatea produsului?</h3>
			<div class="quest q4" id="quest4">
				&#206n caz dac&#259 produsul nu corespunde calitatei prescrise, acesta va fi &#238nlocuit cu altu timp de 24 ore &#351i un mic cadou de la noi pentru deranjul oferit.
			</div>
		</div>


Источник

Ответы (2 шт):

Автор решения: Денис Степанов

Со второго раза, потому что document.getElementById(`quest${index}`.style.display при первом нажатии undefined.
Вы тут получаете значение атребута style у dom элемента, а не примененные стили.

Можно вручную задать всем полям атребут style="display: none";

const questElement = document.getElementsByClassName('quest');

function quest(index) {
  if (document.getElementById(`quest${index}`).style.display == 'none') {
    document.getElementById(`quest${index}`).style.display = 'block';
  } else {
    questElement[index].style.display = 'none';
  }
}
* {
  margin: 0;
  padding: 0;
  font-family: 'Acme', sans-serif;
}

.recent-quest {
  position: absolute;
  margin: 1vw 10%;
  width: 80%;
  color: black;
}

h3 {
  padding: .5vw 1vw;
  cursor: pointer;
  color: black;
}

h3:hover {
  color: red;
}

a {
  color: black;
}

.quest {
  margin-left: 5%;
  display: none;
}
<script src="https://kit.fontawesome.com/4fcf22c1ce.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Acme&display=swap" rel="stylesheet">
<div class="recent-quest" id="recent">
  <h2 align="center" style="color: black">&#206ntreb&#259ri frecvente</h2>
  <h3 onclick="quest(0)"><i class="fas fa-caret-right"></i>Cum pot g&#259si site-ul pe Internet (Facebook, Instagram) ?</h3>
  <div class="quest q1" id="quest0" style="display: none;"> <!-- вот тут -->
    Pute&#355i s&#259 ne g&#259si&#355i pe <a href="https://www.facebook.com/">Facebook</a> sau <a href="https://www.instagram.com/">Instagram</a>. Acolo pute&#355i g&#259si toate informi&#355iile despre site-ul nostru &#351i despre ofertele speciale.
  </div>
  <h3 onclick="quest(1)"><i class="fas fa-caret-right"></i>Cum putem achita produsul dorit?</h3>
  <div class="quest q2" id="quest1" style="display: none;"> <!-- вот тут -->
    Produsele pot fi achitate online, cu ajutorul cardului sau portofelului online (qiwi, webmoney), sau in numerar, curierului care v&#259 va aduce produsul dorit.
  </div>
  <h3 onclick="quest(2)"><i class="fas fa-caret-right"></i>Cum putem primi produsul achitat?</h3>
  <div class="quest q3" id="quest2" style="display: none;"> <!-- вот тут -->
    Produsul poate fi trimis cu ajutorul unui curier sau luat personal de la unul din magazinele noastre.
  </div>
  <h3 onclick="quest(3)"><i class="fas fa-caret-right"></i>Cum pot fi sugur &#238n calitatea produsului?</h3>
  <div class="quest q4" id="quest3" style="display: none;"> <!-- вот тут -->
    &#206n caz dac&#259 produsul nu corespunde calitatei prescrise, acesta va fi &#238nlocuit cu altu timp de 24 ore &#351i un mic cadou de la noi pentru deranjul oferit.
  </div>
</div>

Или можно проверять, что поле до этого не было задано.
Можно добавить проверку на document.getElementById(`quest${index}`).style.display === ''

const questElement = document.getElementsByClassName('quest');

function quest(index) {
  if (
    document.getElementById(`quest${index}`).style.display === 'none' ||
    document.getElementById(`quest${index}`).style.display === '' // вот тут
  ) { 
    document.getElementById(`quest${index}`).style.display = 'block';
  } else {
    questElement[index].style.display = 'none';
  }
}
* {
  margin: 0;
  padding: 0;
  font-family: 'Acme', sans-serif;
}

.recent-quest {
  position: absolute;
  margin: 1vw 10%;
  width: 80%;
  color: black;
}

h3 {
  padding: .5vw 1vw;
  cursor: pointer;
  color: black;
}

h3:hover {
  color: red;
}

a {
  color: black;
}

.quest {
  margin-left: 5%;
  display: none;
}
<script src="https://kit.fontawesome.com/4fcf22c1ce.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Acme&display=swap" rel="stylesheet">
<div class="recent-quest" id="recent">
  <h2 align="center" style="color: black">&#206ntreb&#259ri frecvente</h2>
  <h3 onclick="quest(0)"><i class="fas fa-caret-right"></i>Cum pot g&#259si site-ul pe Internet (Facebook, Instagram) ?</h3>
  <div class="quest q1" id="quest0">
    Pute&#355i s&#259 ne g&#259si&#355i pe <a href="https://www.facebook.com/">Facebook</a> sau <a href="https://www.instagram.com/">Instagram</a>. Acolo pute&#355i g&#259si toate informi&#355iile despre site-ul nostru &#351i despre ofertele speciale.
  </div>
  <h3 onclick="quest(1)"><i class="fas fa-caret-right"></i>Cum putem achita produsul dorit?</h3>
  <div class="quest q2" id="quest1">
    Produsele pot fi achitate online, cu ajutorul cardului sau portofelului online (qiwi, webmoney), sau in numerar, curierului care v&#259 va aduce produsul dorit.
  </div>
  <h3 onclick="quest(2)"><i class="fas fa-caret-right"></i>Cum putem primi produsul achitat?</h3>
  <div class="quest q3" id="quest2">
    Produsul poate fi trimis cu ajutorul unui curier sau luat personal de la unul din magazinele noastre.
  </div>
  <h3 onclick="quest(3)"><i class="fas fa-caret-right"></i>Cum pot fi sugur &#238n calitatea produsului?</h3>
  <div class="quest q4" id="quest3">
    &#206n caz dac&#259 produsul nu corespunde calitatei prescrise, acesta va fi &#238nlocuit cu altu timp de 24 ore &#351i un mic cadou de la noi pentru deranjul oferit.
  </div>
</div>

Или можно использовать getComputedStyle, чтобы получить примененные к элементу стили. 

const questElement = document.getElementsByClassName('quest');

function quest(index) {
  if (getComputedStyle(document.getElementById(`quest${index}`)).display === 'none') { // вот тут
    document.getElementById(`quest${index}`).style.display = 'block';
  } else {
    questElement[index].style.display = 'none';
  }
}
* {
  margin: 0;
  padding: 0;
  font-family: 'Acme', sans-serif;
}

.recent-quest {
  position: absolute;
  margin: 1vw 10%;
  width: 80%;
  color: black;
}

h3 {
  padding: .5vw 1vw;
  cursor: pointer;
  color: black;
}

h3:hover {
  color: red;
}

a {
  color: black;
}

.quest {
  margin-left: 5%;
  display: none;
}
<script src="https://kit.fontawesome.com/4fcf22c1ce.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Acme&display=swap" rel="stylesheet">
<div class="recent-quest" id="recent">
  <h2 align="center" style="color: black">&#206ntreb&#259ri frecvente</h2>
  <h3 onclick="quest(0)"><i class="fas fa-caret-right"></i>Cum pot g&#259si site-ul pe Internet (Facebook, Instagram) ?</h3>
  <div class="quest q1" id="quest0">
    Pute&#355i s&#259 ne g&#259si&#355i pe <a href="https://www.facebook.com/">Facebook</a> sau <a href="https://www.instagram.com/">Instagram</a>. Acolo pute&#355i g&#259si toate informi&#355iile despre site-ul nostru &#351i despre ofertele speciale.
  </div>
  <h3 onclick="quest(1)"><i class="fas fa-caret-right"></i>Cum putem achita produsul dorit?</h3>
  <div class="quest q2" id="quest1">
    Produsele pot fi achitate online, cu ajutorul cardului sau portofelului online (qiwi, webmoney), sau in numerar, curierului care v&#259 va aduce produsul dorit.
  </div>
  <h3 onclick="quest(2)"><i class="fas fa-caret-right"></i>Cum putem primi produsul achitat?</h3>
  <div class="quest q3" id="quest2">
    Produsul poate fi trimis cu ajutorul unui curier sau luat personal de la unul din magazinele noastre.
  </div>
  <h3 onclick="quest(3)"><i class="fas fa-caret-right"></i>Cum pot fi sugur &#238n calitatea produsului?</h3>
  <div class="quest q4" id="quest3">
    &#206n caz dac&#259 produsul nu corespunde calitatei prescrise, acesta va fi &#238nlocuit cu altu timp de 24 ore &#351i un mic cadou de la noi pentru deranjul oferit.
  </div>
</div>

→ Ссылка
Автор решения: Денис Степанов

Вот еще есть такой вариант обойтись возможностями CSS (без JS).

* {
  margin: 0;
  padding: 0;
  font-family: 'Acme', sans-serif;
}

.recent-quest {
  position: absolute;
  margin: 1vw 10%;
  width: 80%;
  color: black;
}

label {
  padding: .5vw 1vw;
  cursor: pointer;
  color: black;
  display: block;
  font-size: 1.3em;
  font-weight: bold;
}

label:hover {
  color: red;
}

a {
  color: black;
}

.quest {
  margin-left: 5%;
  display: none;
}

.tab-checkbox {
  display: none;
}

#tab-1:checked~#quest-1,
#tab-2:checked~#quest-2,
#tab-3:checked~#quest-3,
#tab-4:checked~#quest-4 {
  display: block;
}
<script src="https://kit.fontawesome.com/4fcf22c1ce.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Acme&display=swap" rel="stylesheet">

<div class="recent-quest" id="recent">
  <h2 align="center" style="color: black">&#206ntreb&#259ri frecvente</h2>
  <input class='tab-checkbox' type='checkbox' id='tab-1'>
  <input class='tab-checkbox' type='checkbox' id='tab-2'>
  <input class='tab-checkbox' type='checkbox' id='tab-3'>
  <input class='tab-checkbox' type='checkbox' id='tab-4'>

  <label for='tab-1'><i class="fas fa-caret-right"></i>Cum pot g&#259si site-ul pe Internet (Facebook, Instagram) ?</label>
  <div class="quest" id="quest-1">
    Pute&#355i s&#259 ne g&#259si&#355i pe <a href="https://www.facebook.com/">Facebook</a> sau <a href="https://www.instagram.com/">Instagram</a>. Acolo pute&#355i g&#259si toate informi&#355iile despre site-ul nostru &#351i despre ofertele speciale.
  </div>

  <label for='tab-2'><i class="fas fa-caret-right"></i>Cum putem achita produsul dorit?</label>
  <div class="quest" id="quest-2">
    Produsele pot fi achitate online, cu ajutorul cardului sau portofelului online (qiwi, webmoney), sau in numerar, curierului care v&#259 va aduce produsul dorit.
  </div>

  <label for='tab-3'><i class="fas fa-caret-right"></i>Cum putem primi produsul achitat?</label>
  <div class="quest" id="quest-3">
    Produsul poate fi trimis cu ajutorul unui curier sau luat personal de la unul din magazinele noastre.
  </div>

  <label for='tab-4'><i class="fas fa-caret-right"></i>Cum pot fi sugur &#238n calitatea produsului?</label>
  <div class="quest" id="quest-4">
    &#206n caz dac&#259 produsul nu corespunde calitatei prescrise, acesta va fi &#238nlocuit cu altu timp de 24 ore &#351i un mic cadou de la noi pentru deranjul oferit.
  </div>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.