javascript - 单击时更改颜色而不是单击其他项目时更改回来

Question

我有我的Javascript设置，所以当我单击一个按钮时，文本会改变颜色，我试图在单击另一个按钮时使文本变回其原始颜色。

HTML:

    <button class="middleHeader" id="button1">Button 1</button>

    <button class="middleHeader" id="button2">Button 2</button>

JS:

    var button1 = document.querySelector('button1'),
        button2 = document.querySelector('button2');

    function changeColor() {
        this.style.color = '#5d98fb';
        return false;
    }

    button1.addEventListener('click', changeColor, false);
    button2.addEventListener('click', changeColor, false);

Answer 1

• 两个按钮应该有不同的处理函数

或者

• 处理函数中有 if 条件

var button1 = document.querySelector('#button1'),
  button2 = document.querySelector('#button2');//ID selector starts with "#"

function changeColor() {
  this.style.color = '#5d98fb';
  return false;
}

function restoreColor() {
  button1.style.color = '';
  return false;
}

button1.addEventListener('click', changeColor, false);
button2.addEventListener('click', restoreColor, false);

<button class="middleHeader" id="button1">Button 1</button>
<button class="middleHeader" id="button2">Button 2</button>