mardi 21 septembre 2021

I made a question slider in which there are different question. On clicking the eye it displays ans. For first ques js is working but nor for rest

<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"
        }
    });
})

Aucun commentaire:

Enregistrer un commentaire