Изменить цвет на клик

Question

Я пытаюсь изменить цвет элемента, используя .style.color, и это не очень гладко.Моя цель состоит в том, чтобы это изменило красный и затем синий на щелчках.Любые рекомендации?

var turns = 0;

function dot_01() {
    if (turns === 0) {
        turns++;
        document.getElementById("dot_01").style.color = 'red';
     } else if (turns === 1) {
        turns--;
        document.getElementById("dot_01").style.color = 'blue';
    }
}

<div class="dot" id="dot_01" onclick="dot_01()"></div>

Answer 1

Если вы хотите изменить цвет фона, попробуйте style.backgroundColor следующим образом:

document.getElementById("dot_01").style.backgroundColor = 'red';
function dot_01(el) {
  if (el.style.backgroundColor === 'red') {
    el.style.backgroundColor = 'blue';   
  }
  else el.style.backgroundColor = 'red';
}

<div class="dot" id="dot_01" onclick="dot_01(this)">Container</div>

Answer 2

Я использую это для изменения стиля, это очень простой JavaScript, который изменяет свойства отображения и высоты CSS для отображения / скрытия контейнера. Извините, я еще не изменил ваш желаемый результат, но я надеюсь, что это поможет, просто измените его, чтобы изменить цвет, выполнив что-то вроде:

стиль = "цвет: красный"

https://jsfiddle.net/raydekker/u821a84d/

style="color:red";

Answer 3

Вы хотите использовать .style.backgroundColor для изменения цвета кнопки..color собирается изменить цвет шрифта.

<input type="button" value="Click Me" onclick="this.style.backgroundColor = '#000'; this.style.color = '#FFF';" />