按钮颜色 onclick javascript

Question

我有 3 个绿色按钮，我想在单击按钮时将颜色更改为红色，例如：单击按钮 1，按钮从绿色变为红色，然后单击按钮 2，按钮 1 变回绿色现在按钮 2 是红色的。现在我有： var button1 = document.getElementById("button1");    var count= 0;        button1.onclick = onbutton1clicked;        function onbutton1clicked(){        count++;        button1.innerHTML=count;                if(onbutton1clicked){            button1.style.backgroundColor = "red";        }else{            button1.style.backgroundColor = "green";        }    }  var button2 = document.getElementById("button2");  var count= 0;        button2.onclick = onbutton2clicked;        function onbutton2clicked(){        count++;        button2.innerHTML=count;                if(onbutton2clicked){            button2.style.backgroundColor = "red";        }else{            button2.style.backgroundColor = "green";        }    }  var button3 = document.getElementById("button3");  var count= 0;        button3.onclick = onbutton3clicked;        function onbutton3clicked(){        count++;        button3.innerHTML=count;                if(onbutton3clicked){            button3.style.backgroundColor = "red";        }else{            button3.style.backgroundColor = "green";        }    }但是当点击其他按钮时，第一个按下的按钮保持红色，我该如何解决这个问题？

Answer 1

您可以再次更改其他按钮：

var button1 = document.getElementById("button1");

var count = 0;

button1.onclick = onbutton1clicked;

function onbutton1clicked() {

  count++;

  button1.innerHTML = count;

  if (onbutton1clicked) {

    button1.style.backgroundColor = "red";

    button2.style.backgroundColor = "green";

    button3.style.backgroundColor = "green";

  } else {

    button1.style.backgroundColor = "green";

  }

}

var button2 = document.getElementById("button2");

var count = 0;

button2.onclick = onbutton2clicked;

function onbutton2clicked() {

  count++;

  button2.innerHTML = count;

  if (onbutton2clicked) {

    button1.style.backgroundColor = "green";

    button2.style.backgroundColor = "red";

    button3.style.backgroundColor = "green";

  } else {

    button2.style.backgroundColor = "green";

  }

}

var button3 = document.getElementById("button3");

var count = 0;

button3.onclick = onbutton3clicked;

function onbutton3clicked() {

  count++;

  button3.innerHTML = count;

  if (onbutton3clicked) {

    button1.style.backgroundColor = "green";

    button2.style.backgroundColor = "green";

    button3.style.backgroundColor = "red";

  } else {

    button3.style.backgroundColor = "green";

  }

}

button{

  background-color: green

}

<button id="button1">1</button>

<button id="button2">2</button>

<button id="button3">3</button>

我没有修改你的其余代码，这太混乱了

Answer 2

你在这里提出了非常有趣的问题：D

首先，在回答你的问题之前，我认为最好指出这始终是一个很好的做法。以一种易于理解和简洁的方式编写代码，即使只是为了你自己，也是一个很好的习惯，如果从小养成这个习惯，将为你在未来节省大量的压力和调试时间：3

话虽如此，这就是解决方案。

  var button1 = document.getElementById("button1");

            var button2 = document.getElementById("button2");

            var button3 = document.getElementById("button3");

            var count = 0;

            button1.onclick = onbutton1clicked;

            button2.onclick = onbutton2clicked;

            button3.onclick = onbutton3clicked;

            function isRed(button) {

                if (button.style.backgroundColor === "red") {

                    return "green";

                } else {

                    return "red";

                }

            }

            function onbutton1clicked() {

                button1.innerHTML = count++;

                button1.style.backgroundColor = isRed(button1);

                button2.style.backgroundColor = "green";

                button3.style.backgroundColor = "green";

            }

            function onbutton2clicked() {

                button2.innerHTML = count++;

                button1.style.backgroundColor = "green";

                button2.style.backgroundColor = isRed(button2);

                button3.style.backgroundColor = "green";

            }

            function onbutton3clicked() {

                button3.innerHTML = count++;

                button1.style.backgroundColor = "green";

                button2.style.backgroundColor = "green";

                button3.style.backgroundColor = isRed(button3);

            }

button {

  background-color: green;

  width: 60px;

  height: 20px;

}

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>Hello There</title>

    </head>

    <body>

        <button id="button1">0</button>

        <button id="button2">0</button>

        <button id="button3">0</button>

    </body>

</html>

您在答案中缺少的是，在您的if声明中，您只有在单击后才将颜色更改为红色。因此，这意味着每次您单击该按钮时，它总是会变为红色，并且无法更改为任何其他颜色。

简单地通过检查当前按钮的颜色是一种更有效的方法，这样您只需检查当前按钮的颜色即可。然后相应地更改它！

我相信这就是您想要的功能？如果我错过了什么，请告诉我！

祝你有美好的一天:D

Answer 3

很快，您就可以使用活动类了。它更短且更具可读性（在我看来）。

这是例子：

HTML：

<div id="myDIV">

  <button class="btn active">1</button>

  <button class="btn">2</button>

  <button class="btn">3</button>

  <button class="btn">4</button>

  <button class="btn">5</button>

</div>

CSS：

/* Style the buttons */

.btn {

  background-color: red;

  color: white;

}

/* Style the active class (and buttons on mouse-over) */

.active, .btn:hover {

  background-color: green;

  color: white;

}

JS：

// Get the container element

var btnContainer = document.getElementById("myDIV");

// Get all buttons with class="btn" inside the container

var btns = btnContainer.getElementsByClassName("btn");

// Loop through the buttons and add the active class to the current/clicked button

for (var i = 0; i < btns.length; i++) {

  btns[i].addEventListener("click", function() {

    var current = document.getElementsByClassName("active");

    current[0].className = current[0].className.replace(" active", "");

    this.className += " active";

  });

}`

您可以在这里观看现场演示

Answer 4

let buttons = [...document.querySelectorAll('button')];

        let count=0;

        buttons.forEach(b => {

            b.innerText=count;

            b.addEventListener('click',function(e){

                buttons.forEach(b=>b.style.backgroundColor="red")

                b.style.backgroundColor = b.style.backgroundColor == 'green' ? 'red' : 'green';

                b.innerText=++count;

            })

        });

 button{

    background: red;

    border: none;

    padding: 10px;

    font-size: 22px;

    width: 50px;

    color: white;

    border-radius:50%;

    outline:none;

    cursor:pointer;

}

<html>

  <body>

      <button></button>

      <button></button>

      <button></button>

   </body>

</html>