Member 13835151 Ответов: 2

Изменение цвета текста HTML кнопки несколько раз с помощью функции JS

Я пытаюсь написать функцию, которая изменит цвет текста кнопки на красный при первом щелчке, зеленый при втором щелчке и обратно на черный при третьем щелчке (и так далее). Моя идея заключается в том, что это должно быть довольно просто выполнить с помощью оператора if else, который проверяет цвет кнопки, а затем изменяет его. Я получил цвет, чтобы изменить на первом щелчке просто отлично, но я, кажется, не в состоянии получить какой-либо результат на следующих щелчках. Начальный цвет текста устанавливается встроенным в тег кнопки.

Что я уже пробовал:

До сих пор у меня есть ряд кнопок, которые содержат onclick = "changeColor(this) и вызов:

`function changeColor(alphaButton) {
    if (alphaButton.style.color === "black") {
        alphaButton.style.color = "red"; 
    } else if (alphaButton.style.color === "red") {
        alphaButton.style.color = "green"; 
    } else if (alphaButton.style.color === "green") {
        alphaButton.style.color = "black"; 
    }
} `


Оператор if работает нормально, но я не уверен, почему он не работает дальше этого. Любая помощь будет очень признательна!

[ОБНОВЛЕНИЕ]

Оказывается, проверка цвета не могла быть выполнена, потому что я забыл правильно установить ее с самого начала. Следующий код был рекомендован мне и отлично работает: 

const colors = ["black", "red", "green"];

function changeColor(alphaButton) {
  var current = alphaButton.dataset.ci || 0;
  current = (current + 1) % colors.length;
  alphaButton.dataset.ci = current;
  alphaButton.style.color = colors[current];
}

2 Ответов

Рейтинг:
1

Patrice T

= - это присвоение значения
== или === это для сравнения
Попробуй

function changeColor(alphaButton) {
    if (alphaButton.style.color == "black") {
        alphaButton.style.color = "red"; 
    } else if (alphaButton.style.color == "red") {
        alphaButton.style.color = "green"; 
    } else if (alphaButton.style.color == "green") {
        alphaButton.style.color = "black"; 
    }
}

Сравнение JavaScript и логические операторы[^]
[Обновление]
Добавьте это как первую строку функции
tmp=alphaButton.style.color;

а затем перейдите в веб-консоль вашего браузера и используйте отладчик, чтобы увидеть, что делает ваш код.
И обратите внимание на значение tmp, убедитесь, что это именно то, что вы ожидаете. Вы можете обнаружить, что ваши названия цветов неверны.
Отладка JavaScript[^]
Хром Инструменты Разработчика  |  Сеть  |  Разработчики Google[^]

Member 13835151

Да, явная оплошность с моей стороны. Я изменил вопрос, чтобы отразить, что даже с == код не работает.

Рейтинг:
1

Mohibur Rashid

Или вы можете поместить это в массив и запомнить индекс цвета.

<input type=button data-colors="red green blue yellow gold" daya-index=0 style="color:red" onclick='pricessColor(this)'>


function pricessColor(me) {
 let index=me.getAttribute("data-index")+1;
 let colorArr=me.getAttribute("data-colors").split(" ");
 if(colorArr.length<=index){
  index=0
 }
 me.style.color=colorArr[index];
 me.setAttribute("data-index", index);
}


Я думал, это будет весело.