addEventlistener , wielokrotne użycie na tym samym elemencie

pytanie zadane 7 czerwca 2022 w JavaScript przez lenzo1 Początkujący (360 p.)

Witam, robię aplikację wg tutorialu na youtube. Wiem już jak wygląda prawidłowe rozwiązanie, jednak zastanawia mnie dlaczego taki kod nie działa tzn wykonuje się tylko raz. Podglądam elementy w przeglądarce i tam pokazuje że drugi div dostał klasę active ale przy drugim kliknięciu nie działa już to.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- emoji no evil 
    emoji monkey  -->

<div class="emoji open active"></div>
<div class="emoji closed"></div>


    <script src="script.js"></script>
</body>
</html>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.emoji{
    text-align: center;
    font-size: 20rem;
    cursor: pointer;
    display: none;
}

body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.active{
    display: block;
}

I teraz dlaczego takie rozwiązanie nie działa:

document.querySelector('.emoji').addEventListener('click', function () {
  document.querySelector('.open').classList.toggle('active');
  document.querySelector('.closed').classList.toggle('active');
});

Skoro mam dwa elementy które mają tą samą klasę emoji. Nie wiem czy to ma związek ale dziś robiąc aplikację kalkulatora też miałem taki problem gdzie wiele elementów miało tą samą klasę ale tylko na jednym przycisku działał addEventListener . Proszę o wyjaśnienie. Poprawny kod JS to:

document.querySelector('.open').addEventListener('click', function () {
  document.querySelector('.open').classList.toggle('active');
  document.querySelector('.closed').classList.toggle('active');
});

document.querySelector('.closed').addEventListener('click', function () {
  document.querySelector('.closed').classList.toggle('active');
  document.querySelector('.open').classList.toggle('active');
});

2 odpowiedzi

odpowiedź 8 czerwca 2022 przez VBService Ekspert (253,420 p.)

Możesz użyć tak jak wspomniał @wizarddos querySelectorAll lub też użyć "kontener"

przykład

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <!-- emoji no evil 
    emoji monkey  -->
    <div class="emoji"> 
      <div class="open active"></div>
      <div class="closed"></div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.emoji div{
  text-align: center;
  font-size: 20rem;
  width: 20rem;
  height: 20rem;
  cursor: pointer;
  display: none;
  border: 1px solid black;
}
.active{
  display: block !important;
}

document.querySelector('.emoji').addEventListener('click', function() {
  document.querySelector('.open').classList.toggle('active');
  document.querySelector('.closed').classList.toggle('active');
});