как поменять цвет букв на белый только при нажатии

Question

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

Я действительно благодарен вам за помощь.

var drum = document.querySelectorAll("button"),
  i;

for (i = 0; i <= drum.length; ++i) {
  var drumi = drum[i];

  var drummy = drumi.addEventListener("click", function() {
    this.style.color = "white";
  });
}

Answer 1

Просто используя CSS:

button:active {
  color: white;
}

<button>Test</button>

Answer 2

Я думаю, у Питера Коллингриджа лучший ответ. Но если вы хотите сделать это в js, вы можете сделать это следующим образом.

<button onmousedown="turn(this,'blue')" onmouseup="turn(this, 'red')" style="color:red">hello</button>

<script>
    function turn(element, color) {
        element.style.color = color;
    }
</script>

Answer 3

При нажатии кнопки текст становится белым, а затем черным. Это то, что вы хотели?

JS

let clicked = true
let turnWhite = (button) => {
  clicked = !clicked
  clicked ? button.style.color = "white" : button.style.color = "black"
}

HTML

<button onclick="turnWhite(this)">click</button>

Answer 4

Я бы предложил использовать 2 разных события

1. onmousedown, когда пользователь щелкает элемент
2. onmouseup, когда пользователь отпускает кнопку мыши * 1008. *

Предлагаемый код будет выглядеть примерно так:

var drum = document.querySelectorAll("button"),
  i;

for (i = 0; i <= drum.length; ++i) {
  var drumi = drum[i];

  drumi.addEventListener("onmousedown", function() {
    this.style.color = "white";
  });

  drumi.addEventListener("onmouseup", function() {
    this.style.color = "black"; // put the original color here
  });
}