Discussion on: Not toggling between divs

[Grey_W I N D]

Thanks for the feedback. i have tried changing this to btn and still doesn't work. What I mean is that I have 3 div elements and those elements have a <button class='play'> each. And whenever a button is clicked it should indicate on the parent element which is the div that the button is playing a audio. And when i click on the second button from div number two, the data-status='isPlaying' should be on the second div and not the first one anymore

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

[Grey_W I N D]

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