Создание кнопки, которая меняет цвет фона и текста разных элементов - PullRequest
Новая
       7

Создание кнопки, которая меняет цвет фона и текста разных элементов

0 голосов
/ 08 октября 2019

Я пытаюсь создать кнопку, которая при нажатии изменяет элементы страницы на разные цветовые комбинации.

Идея состоит в том, чтобы при нажатии кнопки цвета менялись в парах. Например, когда тело имеет красный цвет , а основные заголовки имеют желтый цвет , альтернативные заголовки и линии границ обозначаются красным цветом (то же самое). цвет тела), а альтернативный фон - «желтый» (тот же цвет основных заголовков).

Почему-то я не могу заставить его работать. Кажется, что цвета меняются случайным образом, вместо того, чтобы иметь порядок, и я не могу изменить цвет 'border-bottom'. 

// Main titles 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 titles and borders 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>

1 Ответ

0 голосов
/ 08 октября 2019

Попробуйте вместо этого? JSFiddle 

const colors = ["yellow", "red", "blue"];
let colorIndex = 0;

function changeColor() {
    let col = document.getElementsByClassName("textcolor");
    let altCol = document.getElementsByClassName('alt-textcolor');

    if (colorIndex >= colors.length) {
      colorIndex = 0;
    }

    for(let i = 0; i < col.length; i++){
    col[i].style.color = colors[colorIndex];
    col[i].style.color = colors[colorIndex+1];
    }
    colorIndex++;
    }

function changeAltColor() {
    let col = document.getElementById("bodycolor");
    let altCol = document.getElementById('alt-backgroundcolor');

    if (colorIndex >= colors.length) {
      colorIndex = 0;
    }

    col.style.backgroundColor = colors[colorIndex+1];
    altCol.style.backgroundColor = colors[colorIndex];
    colorIndex++;
    }

Учитывая, что вы меняете только два цвета одновременно (альтернативный цвет и основной цвет), нет необходимости в 4 функциях.

Кроме того, еслиу вас есть отдельные элементы, такие как div, которые имеют отдельное использование, а затем используйте для них атрибут id вместо class, это проще для написания кода.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...