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.
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 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>