DEV Community

Discussion on: Not toggling between divs

expressgradient profile image

Alrighty, this is my markup,

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

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 =;

    [...root.children].forEach(child => console.log(, 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