0
<div class="slide">
            <div class="ques-container" id="container">
                <div class="reveal-btn">
                    <a id="btn"><i class="far fa-eye"></i></a>
                </div>
                <div class="ques active">
                    <p>QUES</p>
                </div>
                <div class="answer">
                    <p id="para">
                        1) for(let i=1;i<=100;i++)<br>
                        2) if(i%3==0 && i%5==0): console.log("FIZZBUZZ")<br>
                        3) else if(i%3==0): console.log("FIZZ")<br>
                        4) else if(i%5==0): console.log("BUZZ")<br>
                        5) else: console.log(i)<br>
                    </p>
                </div>
            </div>

Blockquote This is what I am trying to do in javascript the thing is it is working for the first quesion only. How to target every slide and on click change their respective property only=>

const reveal = document.querySelector(".reveal-btn");
const text = document.querySelector(".ques");
const main = document.querySelector(".main")
const ans = document.querySelector(".answer");
const container = document.getElementById("container");
const paragraph = document.getElementById("para");

slides.forEach(function(slide){
    reveal.addEventListener('click',function(){
        console.log(reveal)
        text.classList.toggle("active");
        if(text.classList != "ques active"){
            reveal.innerHTML = "<i class=\"fas fa-eye-slash\"></i>"
            ans.classList.add("show");
            container.style.backgroundColor = "#17B978";
            paragraph.style.color = "white";
            reveal.style.color="white";
    
        }
        else{
            reveal.innerHTML= "<i class=\"far fa-eye\"></i>";
            ans.classList.remove("show");
            container.style.backgroundColor = "#C9D6DF";
            reveal.style.color="#52616B"
        }
    });
})
ElectrozZ
  • 1
  • `text.classList != "ques active"` makes no sense. [`classList`](//developer.mozilla.org/docs/Web/API/Element/classList) isn’t a string. Why is `reveal.addEventListener(`…`);` inside a `forEach`? You’re binding multiple event listeners on the _same_ element. – Sebastian Simon Sep 21 '21 at 11:01
  • 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 Sep 21 '21 at 11:03
  • So how to target each ques slide and perform on click operation on them individually.... – ElectrozZ Sep 21 '21 at 11:03
  • text.classList != "ques active"--> it is working for me for the first slide – ElectrozZ Sep 21 '21 at 11:05
  • `text.classList != "ques active"` is never `false`; you could replace that condition by `true`, or remove the `if` condition and remove the `else` block completely. That’s _not_ “working”. – Sebastian Simon Sep 21 '21 at 11:08
  • sharing the github link=> https://imparassharma.github.io/Quessbuzz/ – ElectrozZ Sep 21 '21 at 11:08
  • console.log(text.classList!="ques active") this giving true and (text.classList=="ques active" ) giving false so I thought this is how it works – ElectrozZ Sep 21 '21 at 11:12
  • Could you show us how and where you set 'slides'. And then take a close look at the initial foreach - it keeps picking up the first reveal-btn which for some reason is set outside the loop, where it should be picking up the reveal-btn for that particular slide. – A Haworth Sep 21 '21 at 14:39
  • I am posting the link of my github repo...you can check https://github.com/imparassharma/Quessbuzz – ElectrozZ Sep 21 '21 at 15:25

0 Answers0