As the title says, I need to toggle a class on some buttons and I don't really understand how to do it more than once. The problem is with the second block of code (the one with document.querySelector), not with the other one.
The other one is there because it is used for navigation, and it has to be there.
If you click on "executie", the text will change. Below it, there will be an arrow to change the text. It works, but if you want to turn back (on the other arrow that appears) it doesn't work anymore.
Can anybody help me understand why that happens? Thanks.
document.querySelector(".fa-arrow-custom").addEventListener("click", function() {
const primaPagina = document.querySelector(".executie-problema");
const aDouaPagina = document.querySelector(".executie2-problema")
primaPagina.classList.toggle("hide", !primaPagina.classList.contains("hide"));
aDouaPagina.classList.toggle("hide", !aDouaPagina.classList.contains("hide"));
});
.hide {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Divide et Impera</title>
<script src="https://kit.fontawesome.com/6612084f00.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="executie-problema problema">
<div class="row d-flex justify-content-center align-items-center vh-100">
<div class="col-xs-12 col-custom">
Pasi (Divide):
<ol class="pasi-executie">
<li>In main este apelata functia, cu n=5.</li>
<li>Pt n=5, factorial returneaza 5*factorial(4). Astfel, este pus in stiva 5*factorial(4).</li>
<li>Se calculeaza factorial(4), ce returneaza 4*factorial(3), urmatorul element din stiva devenind 4*factorial(3).</li>
<li>Se calculeaza factorial(3), ce returneaza 3*factorial(2), care este pus si in stiva.</li>
<li>Factorial(2) este 2*factorial(1) – se pune in continuare in stiva.</li>
<li>Factorial(1) este 1*factorial(0) – ultimul element pus in stiva.</li>
<li>Divizarea se opreste, deoarece factorial(0) este 1.</li>
<li>Datorita faptului ca in stiva ultimul element se pune intotdeauna deasupra, aceasta arata astfel:</li>
</ol>
<i class="fas fa-arrow-right fa-arrow-custom"></i>
</div>
</div>
</div>
<div class="executie2-problema problema hide">
<div class="row d-flex justify-content-center align-items-center vh-100">
<div class="col-xs-12 col-custom">
Urmatorul pas (Impera):
<ol class="pasi-executie">
<li>Factorial(0) este 1, deci 1*factorial(0) este 1.</li>
<li>2*factorial(1) este 2*1=2.</li>
<li>3*factorial(2) este 3*2=6</li>
<li>4*factorial(3) este 4*6=24</li>
<li>5*factorial(4) este 5*24=120 <- care este problema initiala, deci raspunsul este 120.</li>
</ol>
<i class="fas fa-arrow-left fa-arrow-custom"></i>
</div>
</div>
</div>
</div>
</body>
<script src="./js/meniu-introducere.js"></script>
</html>
question from:
https://stackoverflow.com/questions/65598460/why-does-toggle-happen-only-once-in-js 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
