时间戳

首页 > 解决方案 > 我的代码的主题转换器似乎不起作用

javascript - 我的代码的主题转换器似乎不起作用

问题描述

我有错误：Uncaught TypeError: Cannot read property 'replace' of undefined，所以我尝试更改代码以[i]将所有音调变量转换为数组。它使控制台上述错误消失了，但它仍然没有改变颜色。我尝试console.log在此处添加，但声明中似乎出了点问题，但if我不太清楚是什么。

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>
我尝试在 StackOverflow 中运行它，它改变了某些键的颜色，但其他键保持原样

标签： javascripthtml

解决方案

您正在afor 循环中进行更改，这就是为什么它没有更改所有键的原因。您应该在 for 循环之外更改它。

这是一个更简单的例子：

您可以通过以下方式检查元素是否包含某个类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>

推荐阅读