按钮颜色 onclick javascript
我有 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";
}
}
但是当点击其他按钮时，第一个按下的按钮保持红色，我该如何解决这个问题？
慕运维8079593浏览 144回答 4
4回答
-
繁星coding
您可以再次更改其他按钮：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>我没有修改你的其余代码，这太混乱了 -
哈士奇WWW
你在这里提出了非常有趣的问题：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 -
跃然一笑
很快，您就可以使用活动类了。它更短且更具可读性（在我看来）。这是例子：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"; });}`您可以在这里观看现场演示 -
九州编程
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>
随时随地看视频慕课网APP
相关分类
JavaScript