The theme changer for my code does not seem to work

I had the error: Uncaught TypeError: Cannot read property 'replace' of undefined, so I tried changing the code to have [i] make all the tone variables into arrays. It made the console aforementioned error disappear but it still doesn’t change color. I tried adding console.log here but it seems something is going wrong in the if statement, I can’t quite find out what though.

const butt=document.getElementById('theme')
var a=0;

function ChangeTheme(){
var tone=document.querySelectorAll('.key');
    for(var i=0 ; i<tone.length; i++){
        if(a==0){    
            tone[i].classList.replace('light', 'dark')
            a=1;
        }else if(a==1){
            tone[i].classList.replace('dark', 'crow')
            a=2;
        }else{
            tone[i].classList.replace('crow', 'light') 
            a=0;
        }
    }
}
*, *::before , *::after{
    box-sizing: border-box;
}

:root {
    /*black colors*/
    --carafe: #745859;
    --ebony: #171111;
    --jet: #140005;

    /*white colors*/
    --pewter: #BBC4C2;
    --ivory: #E4DEDA;
    --gunmetal: #79706C;
}
body{
    background-color: #143f6d;
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}


.piano{
    display: flex;
    
}
.key{
    height: calc(var(--width) * 4);
    width: var(--width);
}
.white{
    background: var(--bg-white);
    --width: 75px ;
    border: 1px solid #333;


}
.black{
    background: var(--bg-black);
    --width:45px;
    margin-left: -22.5px;
    margin-right: -22.5px;
    z-index: 2;

}

.light{
    --bg-white: var(--pewter);
    --bg-black: var(--jet);
    --bg: white;

}
.dark{
    --bg-white: var(--ivory);
    --bg-black: var(--carafe);
    --bg: black;

}
.crow{
    --bg-white: var(--gunmetal);
    --bg-black: var(--ebony);
    --bg: grey;

}
#theme{
    border-radius: 50%;
    background: var(--bg);
    height: 50px;
    width: 50px;
    margin-right: -150px;
    margin-bottom: -900px;

}
<body>
    
    <div class="piano"> <div data-note="C3" class="key white light"></div>
        <div data-note="Cb3" class="key black light"></div>
        <div data-note="D3" class="key white light"></div>
        <div data-note="Db3" class="key black light"></div>
        <div data-note="E3" class="key white light"></div>
        <div data-note="F3" class="key white light"></div>
        <div data-note="Fb3" class="key black light"></div>
        <div data-note="G3" class="key white light"></div>
        <div data-note="Gb3" class="key black light"></div>
        <div data-note="A3" class="key white light"></div>
        <div data-note="Ab3" class="key black light"></div>
        <div data-note="B3" class="key white light"></div>
    </div>

    <button id="theme" class="light" onclick="ChangeTheme()">
     
    </button>
    
</body>
I’ve tried running it in the StackOverflow and it changes the color for some keys but others remain as is

Answer

You are changing a in the for loop, that’s why it’s not changing all of the keys. You should change it outside of the for loop.

Here is a simpler example:

You can check if an element contains a certain class by classList.contains(className)

function ChangeTheme(){
  const tone = document.querySelectorAll('.key');

  tone.forEach(e => {
    if(e.classList.contains('light')){
        e.classList.replace('light', 'dark');
    }else if(e.classList.contains('dark')){
        e.classList.replace('dark', 'crow');
    }else{
        e.classList.replace('crow', 'light');
    }
  });
}
*, *::before , *::after{
    box-sizing: border-box;
}

:root {
    /*black colors*/
    --carafe: #745859;
    --ebony: #171111;
    --jet: #140005;

    /*white colors*/
    --pewter: #BBC4C2;
    --ivory: #E4DEDA;
    --gunmetal: #79706C;
}
body{
    background-color: #143f6d;
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}


.piano{
    display: flex;
    
}
.key{
    height: calc(var(--width) * 4);
    width: var(--width);
}
.white{
    background: var(--bg-white);
    --width: 75px ;
    border: 1px solid #333;


}
.black{
    background: var(--bg-black);
    --width:45px;
    margin-left: -22.5px;
    margin-right: -22.5px;
    z-index: 2;

}

.light{
    --bg-white: var(--pewter);
    --bg-black: var(--jet);
    --bg: white;

}
.dark{
    --bg-white: var(--ivory);
    --bg-black: var(--carafe);
    --bg: black;

}
.crow{
    --bg-white: var(--gunmetal);
    --bg-black: var(--ebony);
    --bg: grey;

}
#theme{
    border-radius: 50%;
    background: var(--bg);
    height: 50px;
    width: 50px;
    margin-right: -150px;
    margin-bottom: -900px;

}
<body>
    
    <div class="piano"> <div data-note="C3" class="key white light"></div>
        <div data-note="Cb3" class="key black light"></div>
        <div data-note="D3" class="key white light"></div>
        <div data-note="Db3" class="key black light"></div>
        <div data-note="E3" class="key white light"></div>
        <div data-note="F3" class="key white light"></div>
        <div data-note="Fb3" class="key black light"></div>
        <div data-note="G3" class="key white light"></div>
        <div data-note="Gb3" class="key black light"></div>
        <div data-note="A3" class="key white light"></div>
        <div data-note="Ab3" class="key black light"></div>
        <div data-note="B3" class="key white light"></div>
    </div>

    <button id="theme" class="light" onclick="ChangeTheme()">
     
    </button>
    
</body>