DEV Community

Discussion on: Not toggling between divs

Collapse
expressgradient profile image
Praneeth

Alrighty, this is my markup,

<div class="root">
        <div id="one">
            <button class="play">Play</button>
        </div>
        <div id="two">
            <button class="play">Play</button>
        </div>
        <div id="three">
            <button class="play">Play</button>
        </div>
</div>

And this is my script

const root = document.querySelector(".root");
const buttons = document.querySelectorAll(".play");

[...root.children].forEach(child => {
    child.playStatus = false;
});

root.currentPlayDivId = "";

[...buttons].forEach(button => button.addEventListener("click", () => {
    button.parentNode.playStatus = true;

    if(root.currentPlayDivId !== "") {
        const previousPlayDiv = document.getElementById(root.currentPlayDivId);
        previousPlayDiv.playStatus = false;
    }

    root.currentPlayDivId = button.parentNode.id;

    console.log(root.currentPlayDivId);
    [...root.children].forEach(child => console.log(child.id, child.playStatus));
}));
Thread Thread
rusty_xx profile image
Grey_W I N D Author

Thank you so much...instead of using button.parentNode.playStatus i used it as a dataset so I can retrieve it later on...Thanks