I've been working on a button that changes the color combinations of elements on a page when clicked.
The goal is to have the colors change in specific pairings. For example, when the body is 'red' and the main titles are 'yellow', the alternate titles and border lines should be 'red' (matching the body color), and the alternate background should be 'yellow' (matching the main titles).
Unfortunately, I'm facing some issues with this setup. The colors seem to be changing randomly instead of following a set order, and I'm having trouble altering the 'border-bottom' color.
// Main title color change
var colors = ["yellow", "red", "blue"];
var colorIndex = 0;
function changeText() {
var col = document.getElementsByClassName("textcolor");
if (colorIndex >= colors.length) {
colorIndex = 0;
}
for(var i = 0; i < col.length; i++){
col[i].style.color = colors[colorIndex];
}
colorIndex++;
}
// Body background color change
var colors = ["red", "blue", "yellow"];
var colorIndex = 0;
function changeBackground() {
var col = document.getElementsByClassName("bodycolor");
if (colorIndex >= colors.length) {
colorIndex = 0;
}
for(var i = 0; i < col.length; i++){
col[i].style.backgroundColor = colors[colorIndex];
}
colorIndex++;
}
// Alternate title and border color change
var colors = ["red", "blue", "yellow"];
var colorIndex = 0;
function changeTextAlt() {
var col = document.getElementsByClassName("alt-textcolor");
if (colorIndex >= colors.length) {
colorIndex = 0;
}
for(var i = 0; i < col.length; i++){
col[i].style.color = colors[colorIndex];
}
colorIndex++;
}
// Alternate background color change
var colors = ["yellow", "red", "blue"];
var colorIndex = 0;
function changeBackgroundAlt() {
var col = document.getElementsByClassName("alt-backgroundcolor");
if (colorIndex >= colors.length) {
colorIndex = 0;
}
for(var i = 0; i < col.length; i++){
col[i].style.backgroundColor = colors[colorIndex];
}
colorIndex++;
}
body{
font-size: 18px;
line-height: 1.66667;
font-family: 'Open Sans',Arial,sans-serif;
box-sizing: border-box;
width: 100%;
min-height: 100%;
background-color: #fff;
}
.textcolor{
color: #000;
}
.bodycolor{
background-color: #fff;
}
.alt-textcolor{
color: #fff;
border-bottom: 1px solid #fff;
}
.alt-backgroundcolor{
width: 100%;
height: 200px;
background-color: #000;
}
<body class='bodycolor'>
<button type="button" onclick="changeBackground();changeText();changeTextAlt();changeBackgroundAlt();">Click me</button>
<p class='textcolor'>This is a title</p>
<div class='alt-backgroundcolor'>
<p class='alt-textcolor'>This is an alternate title 1</p>
<p class='alt-textcolor'>This is an alternate title 2</p>
<p class='alt-textcolor'>This is an alternate title 3</p>
<p class='alt-textcolor'>This is an alternate title 4</p>
</div>
<div class='bodycolor'>
<p class='textcolor'>This is another title</p>
</div>
</body>