亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

按鈕顏色 onclick javascript

按鈕顏色 onclick javascript

慕運維8079593 2023-10-20 15:22:09
我有 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";        }    }但是當點擊其他按鈕時，第一個按下的按鈕保持紅色，我該如何解決這個問題？
查看完整描述

4 回答

?
繁星coding

TA貢獻1797條經驗 獲得超4個贊

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


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>

我沒有修改你的其余代碼，這太混亂了



查看完整回答
反對 回復 2023-10-20
?
哈士奇WWW

TA貢獻1799條經驗 獲得超6個贊

你在這里提出了非常有趣的問題：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


查看完整回答
反對 回復 2023-10-20
?
躍然一笑

TA貢獻1826條經驗 獲得超6個贊

很快，您就可以使用活動類了。它更短且更具可讀性（在我看來）。


這是例子：

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";

? });

}`

您可以在這里觀看現場演示



查看完整回答
反對 回復 2023-10-20
?
九州編程

TA貢獻1785條經驗 獲得超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>


查看完整回答
反對 回復 2023-10-20
  • 4 回答
  • 0 關注
  • 221 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號