Question

我有三个按钮。我希望他们在按下时改变颜色，再次按下时再回到无颜色。

我在stackoverflow上发现了这个代码，它允许我差不多这样做，它只能在一个按钮上工作，其他两个不受影响。
另外，当我按下另外两个按钮之一时，第一个按钮改变颜色。我尝试更改按钮上的ID，添加另一个具有不同getElementById() ID的脚本，但没有任何效果。

我需要多个功能来实现我想要的功能吗？

我正在使用的代码如下。

＆＃13;

var count = 1;
function setColor(btn, color) {
  var property = document.getElementById(btn);
  if (count == 0) {
    property.style.backgroundColor = "#FFFFFF";
    count = 1;
  } else {
    property.style.backgroundColor = "#E68352";
    count = 0;
  }
}

＆＃13;

<head>
  <link rel="stylesheet" type="text/css" href="styles/main.css"/>
</head>
<body>
  <input type="button" id="button" value = "A-D" style= "color:black" onclick="setColor('button', '#101010')";/>
  <input type="button" id="button" value = "E-H" style= "color:black" onclick="setColor('button', '#101010')";/>
  <input type="button" id="button" value = "E-H" style= "color:black" onclick="setColor('button', '#101010')";/>
</body>

＆＃13;

Answer 1

通常，当您编写内联事件处理程序时，您可以利用：

this：当前元素：当从内联事件处理程序调用代码时，将其设置为放置侦听器的DOM元素：

event：event element object

因此，改变：

onclick="setColor('button', '#101010')"

使用：

onclick="setColor(this, event, '#101010')"

因此您的代码可以重写为：

function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? 'rgb(' +
        parseInt(result[1], 16) + ', ' +
        parseInt(result[2], 16) + ', ' +
        parseInt(result[3], 16) + ')'
     : null;
}


function setColor(btnEle, evt, color) {
    if (btnEle.style.backgroundColor == hexToRgb("#E68352")) {
        btnEle.style.backgroundColor = "#FFFFFF"
    }
    else {
        btnEle.style.backgroundColor = "#E68352"
    }
}

<input type="button" id="button1" value = "A-D" style= "color:black" onclick="setColor(this, event, '#101010')";/>
<input type="button" id="button2" value = "E-H" style= "color:black" onclick="setColor(this, event, '#101010')";/>
<input type="button" id="button3" value = "E-H" style= "color:black" onclick="setColor(this, event, '#101010')";/>

Answer 2

在按钮上设置一个类，然后遍历按钮并为每个按钮添加一个事件监听器：

编辑：我发现你正在使用onclick处理程序，我最初没有注意到;所以这个答案可能没有我想象的那么有用。如果使用这种方法，你肯定应该使用不同的ID。

<button class="button" ... >

var buttons = document.getElementsByClassName('button')
for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function() {
        // Do your button things.
    })
}

Answer 3

ID在文档中应该是唯一的。像这样：

<input type="button" id="button1" value="A-D" style="color:black" onclick="setColor('button1', '#101010')" ;/>
<--                       here ^                                                      here ^               -->
<input type="button" id="button2" value="E-H" style="color:black" onclick="setColor('button2', '#101010')" ;/>
<--                       here ^                                                      here ^               -->
<input type="button" id="button3" value="E-H" style="color:black" onclick="setColor('button3', '#101010')" ;/>
<--                       here ^                                                      here ^               -->

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script>
    var count = 1;

    function setColor(btn, color) {
      var property = document.getElementById(btn);
      if (count == 0) {
        property.style.backgroundColor = "#FFFFFF"
        count = 1;
      } else {
        property.style.backgroundColor = "#E68352"
        count = 0;
      }
    }
  </script>

  <link rel="stylesheet" type="text/css" href="styles/main.css" />
</head>

<body>

  <input type="button" id="button1" value="A-D" style="color:black" onclick="setColor('button1', '#101010')" ;/>
  <input type="button" id="button2" value="E-H" style="color:black" onclick="setColor('button2', '#101010')" ;/>
  <input type="button" id="button3" value="E-H" style="color:black" onclick="setColor('button3', '#101010')" ;/>

</body>

</html>

＆＃13;

Answer 4

你只需要一些修改。请参阅工作代码。

function setColor(btn, color) {
  var elem = document.getElementById(btn);

  if (elem.hasAttribute("style")) {
    if (elem.getAttribute("style").indexOf("background-color:") == -1) {
          elem.style.backgroundColor = color;
    } else {
          elem.style.backgroundColor = "";
    }
  }
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="styles/main.css" />
</head>

<body>

  <input type="button" id="button1" value="A-D" style="color:black" onclick="setColor('button1', '#E68352')" ;/>
  <input type="button" id="button2" value="E-H" style="color:black" onclick="setColor('button2', '#E68352')" ;/>
  <input type="button" id="button3" value="E-H" style="color:black" onclick="setColor('button3', '#E68352')" ;/>

</body>

</html>

Answer 5

您应该拥有唯一身份ID

您可以使用classList.toggle("yourClass")代替使用count

var buttons = document.getElementsByClassName("button");
for (let i = 0, l = buttons.length; i < l; i++) {
  buttons[i].addEventListener('click', function() {
    buttons[i].classList.toggle('active');
  })
}

.active {
  background-color: #E68352 !important;
}

.button {
  background-color: #FFFFFF;
}

<input type="button" id="button1" class="button" value="A-D" />
<input type="button" id="button2" class="button" value="E-H" />
<input type="button" id="button3" class="button" value="E-H" />

Answer 6

ID必须是唯一的，但您不需要它们

给按钮一个类并使用切换classList

window.onload=function() {
  var buts = document.querySelectorAll(".but");
  for (var i=0;i<buts.length;i++) {
    buts[i].onclick=function() {
      this.classList.toggle("clicked");
    }
  }
}

.but {background-color:black}
.clicked { background-color:#E68352; }

<input type="button" value="A-D" class="but" />
<input type="button" value="E-F" class="but" />
<input type="button" value="G-H" class="but" />

Answer 7

请勿使用数字，请改用此 http://codepen.io/animhotep/pen/qRwjeX?editors=0010

var count = 1;

function setColor(btn, color) {
  if (count == 0) {
    btn.style.backgroundColor = "#FFFFFF"
    count = 1;
  }
  else {
    btn.style.backgroundColor = "#E68352"
    count = 0;
  }
}

Answer 8

正如易卜拉欣正确指出的那样，罗伯托问题在于你对所有按钮使用相同的ID。当javascript执行此代码时：

var property = document.getElementById(btw);

它将始终返回具有指定ID的第一个元素。一种解决方案是为每个按钮选择不同的ID并更新相应的onclick代码。另一个解决方案可能是下面的解决方案，您根本不需要指定ID，函数setColor可以用于任何元素。

<!DOCTYPE html>
<html>
<head>
<script>
var count = 1;
function setColor(element, color) {
    if (count == 0) {
        el.style.backgroundColor = "#FFFFFF"
        count = 1;
    }
    else {
        el.style.backgroundColor = "#E68352"
        count = 0;
    }
}
</script>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
</head>

<body>
    <input type="button" value = "A-D" style= "color:black" onclick="setColor(this, '#101010')";/>
    <input type="button" value = "E-H" style= "color:black" onclick="setColor(this, '#101010')";/>
    <input type="button" value = "E-H" style= "color:black" onclick="setColor(this, '#101010')";/>
</body>
</html>

请注意使用this变量作为setColor的第一个参数。在每个按钮中，相应的this将指向定义它的元素。

希望它有所帮助。

多个按钮上的javascript函数

8 个答案: