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

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>

Answer 2

我看到了两种可能的解决方案。第一个：

var button3 = document.querySelector('button3');
button3.addEventListener('click', function() {
     this.style.color = '#ff0000';
     return false;
}, false);

如果您想通过单击按钮外的任何位置来更改颜色，那么下一个可以解决您的问题：

document.window.addEventListener('click', function() {
     this.style.color = '#ff0000';
     return false;
}, false);

我不尝试两种可能的解决方案。

Answer 3

var button1 = document.querySelector('#button1'),
  button2 = document.querySelector('#button2');
function changeColor() {
  this.style.color = '#5d9345';
  return false;
}
button1.addEventListener('click', changeColor, false);
button2.addEventListener('click', changeColor, false);

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

试试这个

Answer 4

 <p id="text">This text will change style</p><br>
 <button type="button" onclick="javascripot:changeStyle();">Click me</button>
  <button type="button" onclick="javascripot:changeStyle1();">Click me</button>
 <script>
    function changeStyle() {
   x = document.getElementById("text");
    x.style.color = 'blue';
    }
        function changeStyle1() {
   x = document.getElementById("text");
   x.style.color = 'black';
  }
   </script>