我的背景色不会随javascript而改变

如果有任何帮助，我将不胜感激，我想我要写的代码是完全错误的。我想在单击按钮时更改标题颜色，使其变为蓝色>单击>红色>单击>绿色。到目前为止，我只能实现蓝色>单击>绿色。它从不经过三种颜色。是否有其他方法来编写if语句？或者我不知道的另一种方法允许我对css样式进行一些有条件的更改

var mySwitch=document.getElementById（'header'）.style.background；
if（mySwitch==“暗蓝色”）{
document.getElementById（“myBtn”）.addEventListener（“单击”，函数（）{
document.getElementById（“header”）.style.background=“红色”；
});
}
否则如果（mySwitch==“红色”）{
document.getElementById（“myBtn”）.addEventListener（“单击”，函数（）{
document.getElementById（“header”）.style.background=“绿色”；
});
}
否则{
document.getElementById（“myBtn”）.addEventListener（“单击”，函数（）{
document.getElementById（“header”）.style.background=“暗蓝色”；
});
}

*{
保证金：0；
填充：0；
列表样式：无；
字体系列：无衬线；
}
#标题{
背景：深蓝色；
颜色：白色；
显示器：flex；
证明内容：周围的空间；
高度：12vh；
}
#收割台h1{
文本对齐：左对齐；
边缘顶部：30px；
}
.主导航ul{
填充：0px；
字体大小：1.5rem；
显示器：flex；
边缘顶端：40px；
}
.主导航a{
颜色：白色；
填充：20px；
文字装饰：无；
}
.主导航a:悬停{
颜色：rgb（255148148）；
}
.英雄组{
背景图像：url（“https://stackoverflow.blog/wp-content/uploads/2018/01/BrutalLifeCycleJavascript.png");
背景位置：中心；
背景尺寸：封面；
背景重复：无重复；
高度：80vh；
颜色：白色；
文本对齐：居中；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
}
钮扣{
背景：黑色；
高度：40px；
宽度：80px；
颜色：白色；
边缘顶部：20px；
动画：jumpbutton 1s放松无限；
大纲：无；
边界半径：15px；
}

JAVASCRIPT
这是一个测试环境

点击我
我的同僚们都是精英。夸姆，阿斯佩里奥雷斯

这是正确的Javascript：

当我们听到点击myBtn时，我们只需要一个实例，所以我移动了所有实例并将它们移动到一个实例中。我还在Javascript中声明了颜色，因此只需单击按钮一次即可激活颜色

曼尼尔在这篇文章中给出了更高级的答案！

document.getElementById（'header'）.style.background=“暗蓝色”//在这里声明初始背景色，这样您就不必按两次“Click Me”（单击我）来启动它！
document.getElementById（“myBtn”）.addEventListener（“单击”，函数（）{
var mySwitch=document.getElementById（'header'）.style.background；
如果（mySwitch==“暗蓝色”）{
document.getElementById（“header”）.style.background=“红色”；
}否则如果（mySwitch==“红色”）{
document.getElementById（“header”）.style.background=“绿色”；
}否则{
document.getElementById（“header”）.style.background=“暗蓝色”；
} 
});
*{
保证金：0；
填充：0；
列表样式：无；
字体系列：无衬线；
}
#标题{
背景：深蓝色；
颜色：白色；
显示器：flex；
证明内容：周围的空间；
高度：12vh；
}
#收割台h1{
文本对齐：左对齐；
边缘顶部：30px；
}
.主导航ul{
填充：0px；
字体大小：1.5rem；
显示器：flex；
边缘顶端：40px；
}
.主导航a{
颜色：白色；
填充：20px；
文字装饰：无；
}
.主导航a:悬停{
颜色：rgb（255148148）；
}
.英雄组{
背景图像：url（“https://stackoverflow.blog/wp-content/uploads/2018/01/BrutalLifeCycleJavascript.png");
背景位置：中心；
背景尺寸：封面；
背景重复：无重复；
高度：80vh；
颜色：白色；
文本对齐：居中；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
}
钮扣{
背景：黑色；
高度：40px；
宽度：80px；
颜色：白色；
边缘顶部：20px；
动画：jumpbutton 1s放松无限；
大纲：无；
边界半径：15px；
}






JAVASCRIPT
这是一个测试环境

点击我
我的同僚们都是精英。夸姆，阿斯佩里奥雷斯

这是正确的Javascript：

当我们听到点击myBtn时，我们只需要一个实例，所以我移动了所有实例并将它们移动到一个实例中。我还在Javascript中声明了颜色，因此只需单击按钮一次即可激活颜色

曼尼尔在这篇文章中给出了更高级的答案！

document.getElementById（'header'）.style.background=“暗蓝色”//在这里声明初始背景色，这样您就不必按两次“Click Me”（单击我）来启动它！
document.getElementById（“myBtn”）.addEventListener（“单击”，函数（）{
var mySwitch=document.getElementById（'header'）.style.background；
如果（mySwitch==“暗蓝色”）{
document.getElementById（“header”）.style.background=“红色”；
}否则如果（mySwitch==“红色”）{
document.getElementById（“header”）.style.background=“绿色”；
}否则{
document.getElementById（“header”）.style.background=“暗蓝色”；
} 
});
*{
保证金：0；
填充：0；
列表样式：无；
字体系列：无衬线；
}
#标题{
背景：深蓝色；
颜色：白色；
显示器：flex；
证明内容：周围的空间；
高度：12vh；
}
#收割台h1{
文本对齐：左对齐；
边缘顶部：30px；
}
.主导航ul{
填充：0px；
字体大小：1.5rem；
$(document).on('click', '#myBtn', function() {
    let color;
    switch (document.getElementById('header').style.background) {
        case 'darkblue':
            color = 'red';
            break;
        case 'red':
            color = 'green';
            break;
        default:
            color = 'darkblue';
            break;
    }
    $('#header').css('background', color);
});

  $(document).ready(function() {
  let i = 0;
  let colors = ['red', 'green', 'blue','purple', 'orange', 'pink'];
  $('button').click(function() {
    $('.header').css("background-color", colors[i++ % colors.length]);
  })
});