i have three icon. i used forEach loop for this but not find the way to change icon in its prior form when click on other icon

Question

i used toggle for changing icon from icon(-) to this icon(+). but i stuck in the problem how to change icon(+) to this(-) when i click on another icon.

const icn = document.querySelectorAll("span");

icn.forEach(icons => {
  icons.addEventListener("click", function(e) {
    e.preventDefault()
    // console.log(e.currentTarget.classList)
    e.currentTarget.classList.toggle("fa-times");
    if (e.currentTarget.classList.contains("fa-times")) {
      // document.querySelector(".answer").style.display="flex"
    } else {
      document.querySelector(".answer").style.display = "none"

    }
  });
});

<div class="question-container">
  <div class="question">
    <h2>Do You Like fruits?</h2>
    <div class="questionIcn">
      <span class="fas fa-check icn"></span>
    </div>
  </div>
</div>

<div class="question-container">
  <div class="question">
    <h2>Do You Like vegetable?</h2>
    <div class="questionIcn">
      <span class="fas fa-check icn"></span>
    </div>
  </div>
</div>

<div class="question-container">
  <div class="question">
    <h2>Do you like gaming?</h2>
    <div class="questionIcn">
      <span class="fas fa-check"></span>
    </div>
  </div>
</div>
</div>

i don't know about any other language like jquery . i want to do this by using simple js because i m a begginer and it's my project.

Use [event delegation](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) instead of assigning multiple event listeners — it’s more maintainable, and applies to dynamically added elements. E.g., use an [event argument](//developer.mozilla.org/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback)’s [`target`](//developer.mozilla.org/docs/Web/API/Event/target). See [the tag info](/tags/event-delegation/info) and [What is DOM Event delegation?](/q/1687296/4642212). — Sebastian Simon, Jan 05 '22 at 07:48
I don't understand what you are trying to do. Could you please tell me simply your objective? You want a button that changes an icon? If you explain I could code it to show you how I would do it... — Gass, Jan 05 '22 at 07:51
I have 3 font awesome icons "fas fa-plus" when i click on first icon i want to change into "fas fa-times". when i click on second icon i want do same. but i want that first icon (that is changed into"fas fa-times") should be changed into "fa-plus" in it's first form . hope you understand — Nidhi sharma, Jan 05 '22 at 08:03
https://stackoverflow.com/a/70455549/17716837 is not the same situation, but the answer contain all you need to know about event delegation — Laaouatni Anas, Jan 05 '22 at 08:04

score 1 · Answer 1 · answered Jan 05 '22 at 13:46

I wrap the HTML code with <div class='wrapper'> because of event delegation which is more effective than before.

The code below will work as you intended.

const $wrapper= document.querySelector(".wrapper");

$wrapper.addEventListener("click", (e) => {
  const $selectedIcn = e.target.closest(".icn");
  if (!$selectedIcn) return;

  $selectedIcn.classList.toggle("fa-times");
  $selectedIcn.classList.toggle("fa-plus");

  const questionContainers = document.querySelectorAll(".question-container");
  [...questionContainers].map((questionContainer) => {
    const $icn =
      questionContainer.firstElementChild.lastElementChild.firstElementChild;
    if ($icn !== $selectedIcn) {
      $icn.classList.remove("fa-times");
      $icn.classList.add("fa-plus");
    }
  });
});

<link rel="stylesheet" 
href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" />

<div class='wrapper'>
  <div class="question-container">
    <div class="question">
      <h2>Do You Like fruits?</h2>
      <div class="questionIcn">
        <span class="fas fa-plus icn"></span>
      </div>
    </div>
  </div>
  <div class="question-container">
    <div class="question">
      <h2>Do You Like vegetable?</h2>
      <div class="questionIcn">
        <span class="fas fa-plus icn"></span>
      </div>
    </div>
  </div>
  <div class="question-container">
    <div class="question">
      <h2>Do you like gaming?</h2>
      <div class="questionIcn">
        <span class="fas fa-plus icn"></span>
      </div>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Jan 05 '22 at 08:50

Add jQuery JS file into your page. and use below code.

I hope this code will fix your issue.

const icn = document.querySelectorAll("span");



$(document).on("click", "span.fas", function(e){
  e.preventDefault();
  $("span.fas").removeClass("fa-times");
  $(e.target).toggleClass("fa-times");
  if ($(e.target).hasClass("fa-times")) {
      // document.querySelector(".answer").style.display="flex"
    } else {
      $(".answer").hide();
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>

<div class="question-container">
  <div class="question">
    <h2>Do You Like fruits?</h2>
    <div class="questionIcn">
      <span class="fas fa-check icn"></span>
    </div>
  </div>
</div>

<div class="question-container">
  <div class="question">
    <h2>Do You Like vegetable?</h2>
    <div class="questionIcn">
      <span class="fas fa-check icn"></span>
    </div>
  </div>
</div>

<div class="question-container">
  <div class="question">
    <h2>Do you like gaming?</h2>
    <div class="questionIcn">
      <span class="fas fa-check"></span>
    </div>
  </div>
</div>
</div>

i have three icon. i used forEach loop for this but not find the way to change icon in its prior form when click on other icon

2 Answers2