按钮颜色 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() {&nbsp; count++;&nbsp; button1.innerHTML = count;&nbsp; if (onbutton1clicked) {&nbsp; &nbsp; button1.style.backgroundColor = "red";&nbsp; &nbsp; button2.style.backgroundColor = "green";&nbsp; &nbsp; button3.style.backgroundColor = "green";&nbsp; } else {&nbsp; &nbsp; button1.style.backgroundColor = "green";&nbsp; }}var button2 = document.getElementById("button2");var count = 0;button2.onclick = onbutton2clicked;function onbutton2clicked() {&nbsp; count++;&nbsp; button2.innerHTML = count;&nbsp; if (onbutton2clicked) {&nbsp; &nbsp; button1.style.backgroundColor = "green";&nbsp; &nbsp; button2.style.backgroundColor = "red";&nbsp; &nbsp; button3.style.backgroundColor = "green";&nbsp; } else {&nbsp; &nbsp; button2.style.backgroundColor = "green";&nbsp; }}var button3 = document.getElementById("button3");var count = 0;button3.onclick = onbutton3clicked;function onbutton3clicked() {&nbsp; count++;&nbsp; button3.innerHTML = count;&nbsp; if (onbutton3clicked) {&nbsp; &nbsp; button1.style.backgroundColor = "green";&nbsp; &nbsp; button2.style.backgroundColor = "green";&nbsp; &nbsp; button3.style.backgroundColor = "red";&nbsp; } else {&nbsp; &nbsp; button3.style.backgroundColor = "green";&nbsp; }}button{&nbsp; background-color: green}<button id="button1">1</button><button id="button2">2</button><button id="button3">3</button>我没有修改你的其余代码，这太混乱了

Answer 2

你在这里提出了非常有趣的问题：D首先，在回答你的问题之前，我认为最好指出这始终是一个很好的做法。以一种易于理解和简洁的方式编写代码，即使只是为了你自己，也是一个很好的习惯，如果从小养成这个习惯，将为你在未来节省大量的压力和调试时间：3话虽如此，这就是解决方案。&nbsp; var button1 = document.getElementById("button1");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var button2 = document.getElementById("button2");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var button3 = document.getElementById("button3");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var count = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; button1.onclick = onbutton1clicked;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; button2.onclick = onbutton2clicked;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; button3.onclick = onbutton3clicked;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function isRed(button) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (button.style.backgroundColor === "red") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return "green";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return "red";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function onbutton1clicked() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; button1.innerHTML = count++;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; button1.style.backgroundColor = isRed(button1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; button2.style.backgroundColor = "green";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; button3.style.backgroundColor = "green";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function onbutton2clicked() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; button2.innerHTML = count++;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; button1.style.backgroundColor = "green";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; button2.style.backgroundColor = isRed(button2);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; button3.style.backgroundColor = "green";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function onbutton3clicked() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; button3.innerHTML = count++;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; button1.style.backgroundColor = "green";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; button2.style.backgroundColor = "green";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; button3.style.backgroundColor = isRed(button3);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }button {&nbsp; background-color: green;&nbsp; width: 60px;&nbsp; height: 20px;}<!DOCTYPE html><html>&nbsp; &nbsp; <head>&nbsp; &nbsp; &nbsp; &nbsp; <meta charset="UTF-8" />&nbsp; &nbsp; &nbsp; &nbsp; <meta name="viewport" content="width=device-width, initial-scale=1.0" />&nbsp; &nbsp; &nbsp; &nbsp; <title>Hello There</title>&nbsp; &nbsp; </head>&nbsp; &nbsp; <body>&nbsp; &nbsp; &nbsp; &nbsp; <button id="button1">0</button>&nbsp; &nbsp; &nbsp; &nbsp; <button id="button2">0</button>&nbsp; &nbsp; &nbsp; &nbsp; <button id="button3">0</button>&nbsp; &nbsp; </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 elementvar btnContainer = document.getElementById("myDIV");// Get all buttons with class="btn" inside the containervar btns = btnContainer.getElementsByClassName("btn");// Loop through the buttons and add the active class to the current/clicked buttonfor (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')];&nbsp; &nbsp; &nbsp; &nbsp; let count=0;&nbsp; &nbsp; &nbsp; &nbsp; buttons.forEach(b => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; b.innerText=count;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; b.addEventListener('click',function(e){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; buttons.forEach(b=>b.style.backgroundColor="red")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; b.style.backgroundColor = b.style.backgroundColor == 'green' ? 'red' : 'green';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; b.innerText=++count;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp;button{&nbsp; &nbsp; background: red;&nbsp; &nbsp; border: none;&nbsp; &nbsp; padding: 10px;&nbsp; &nbsp; font-size: 22px;&nbsp; &nbsp; width: 50px;&nbsp; &nbsp; color: white;&nbsp; &nbsp; border-radius:50%;&nbsp; &nbsp; outline:none;&nbsp; &nbsp; cursor:pointer;}<html>&nbsp; <body>&nbsp; &nbsp; &nbsp; <button></button>&nbsp; &nbsp; &nbsp; <button></button>&nbsp; &nbsp; &nbsp; <button></button>&nbsp; &nbsp;</body></html>