单击时 HTML/CSS 更改按钮的颜色，包括其他按钮
[英]HTML/CSS change color of buttons including other buttons when clicked
问题描述
var level1 = document.getElementsById("bar1"); var level2 = document.getElementsById("bar2"); var level3 = document.getElementsById("bar3"); var level4 = document.getElementsById("bar4"); var level5 = document.getElementsById("bar5"); function changeColor1(){ level1.style.backgroundColor = "#FF0000"; level2.style.backgroundColor = '#FFFFFF'; level3.style.backgroundColor = '#FFFFFF'; level4.style.backgroundColor = '#FFFFFF'; level5.style.backgroundColor = '#FFFFFF'; } function changeColor2(){ level1.style.backgroundColor = red; level2.style.backgroundColor = red; level3.style.backgroundColor = none; level4.style.backgroundColor = none; level5.style.backgroundColor = none; } function changeColor3(){ level1.style.backgroundColor = red; level2.style.backgroundColor = red; level3.style.backgroundColor = red; level4.style.backgroundColor = none; level5.style.backgroundColor = none; } function changeColor4(){ level1.style.backgroundColor = red; level2.style.backgroundColor = red; level3.style.backgroundColor = red; level4.style.backgroundColor = red; level5.style.backgroundColor = none; } function changeColor5(){ level1.style.backgroundColor = red; level2.style.backgroundColor = red; level3.style.backgroundColor = red; level4.style.backgroundColor = red; level5.style.backgroundColor = red; }
button { background-color: white; border: 0.5px solid black; text-align: center; display: inline-block; cursor: pointer; padding: 4px 24px; }
<.doctype html> <html> <head> <title>Cat Dominates World</title> <script src="popup.js"></script> <link rel="stylesheet" href="popup.css"/> </head> <body> <header> <h3>Cat Dominates World</h3> <header> <button id="bar1" onClick="changeColor1()"></button> <button id="bar2" onClick="changeColor2()"></button> <button id="bar3" onClick="changeColor3()"></button> <button id="bar4" onClick="changeColor4()"></button> <button id="bar5" onClick="changeColor5()"></button> </body> </html>
Hello, I'm making 5 level bar using HTML/CSS now.
您好，我现在正在使用 HTML/CSS 制作 5 级栏。 and trying to change the color of multiple buttons, For example, clicking third button.并尝试更改多个按钮的颜色，例如，单击第三个按钮。 the color of 1st/2nd/3rd buttons change to red. 1st/2nd/3rd 按钮的颜色变为红色。 It doesn't work with the code above though?它不适用于上面的代码吗？ Can you give me the solution for the problem?你能给我解决问题的方法吗？
4 个解决方案
解决方案1
0 已采纳 2020-07-23 12:36:33
It is document.getElementById not document.getElementsById .它是document.getElementById不是document.getElementsById 。 Also your colors are never defined.此外，您的 colors 也从未定义。
const level1 = document.getElementById("bar1"); // correct funtion const level2 = document.getElementById("bar2"); const level3 = document.getElementById("bar3"); const level4 = document.getElementById("bar4"); const level5 = document.getElementById("bar5"); const red = "#FF0000"; // define the colors const none = '#FFFFFF'; function changeColor1(){ level1.style.backgroundColor = red; level2.style.backgroundColor = none; level3.style.backgroundColor = none; level4.style.backgroundColor = none; level5.style.backgroundColor = none; } function changeColor2(){ level1.style.backgroundColor = red; level2.style.backgroundColor = red; level3.style.backgroundColor = none; level4.style.backgroundColor = none; level5.style.backgroundColor = none; } function changeColor3(){ level1.style.backgroundColor = red; level2.style.backgroundColor = red; level3.style.backgroundColor = red; level4.style.backgroundColor = none; level5.style.backgroundColor = none; } function changeColor4(){ level1.style.backgroundColor = red; level2.style.backgroundColor = red; level3.style.backgroundColor = red; level4.style.backgroundColor = red; level5.style.backgroundColor = none; } function changeColor5(){ level1.style.backgroundColor = red; level2.style.backgroundColor = red; level3.style.backgroundColor = red; level4.style.backgroundColor = red; level5.style.backgroundColor = red; }
button { background-color: white; border: 0.5px solid black; text-align: center; display: inline-block; cursor: pointer; padding: 4px 24px; }
<.doctype html> <html> <head> <title>Cat Dominates World</title> <script src="popup.js"></script> <link rel="stylesheet" href="popup.css"/> </head> <body> <header> <h3>Cat Dominates World</h3> <header> <button id="bar1" onClick="changeColor1()"></button> <button id="bar2" onClick="changeColor2()"></button> <button id="bar3" onClick="changeColor3()"></button> <button id="bar4" onClick="changeColor4()"></button> <button id="bar5" onClick="changeColor5()"></button> </body> </html>
解决方案2
0 2020-07-23 12:38:54
In Javascript you can get a reference to an HTML element using the document.getElementById() function.在 Javascript 中，您可以使用document.getElementById() function 获取对 HTML 元素的引用。 In your script you've called it getElement s ById().在您的脚本中，您将其称为 getElement s ById()。
Furthermore the variable red ain't defined anywhere so it obviously can't change the color to red.此外，变量red没有在任何地方定义，因此它显然无法将颜色更改为红色。 Try adding尝试添加
var red='#FFFFFF';
Lastly to reset a color you can't assign none to the backgroundColor property - it has to be null .最后，要重置颜色，您不能将none分配给backgroundColor属性 - 它必须是null 。
解决方案3
0 2020-07-23 13:00:33
Its minified and working use this snippet它的缩小和工作使用这个片段
function changeColor1() { document.getElementById("bar1").style.background = "red"; document.getElementById("bar2").style.background = "none"; document.getElementById("bar3").style.background = "none"; document.getElementById("bar4").style.background = "none"; document.getElementById("bar5").style.background = "none"; }function changeColor2() { document.getElementById("bar1").style.background = "red"; document.getElementById("bar2").style.background = "red"; document.getElementById("bar3").style.background = "none"; document.getElementById("bar4").style.background = "none"; document.getElementById("bar5").style.background = "none"; }function changeColor3() { document.getElementById("bar1").style.background = "red"; document.getElementById("bar2").style.background = "red"; document.getElementById("bar3").style.background = "red"; document.getElementById("bar4").style.background = "none"; document.getElementById("bar5").style.background = "none"; }function changeColor4() { document.getElementById("bar1").style.background = "red"; document.getElementById("bar2").style.background = "red"; document.getElementById("bar3").style.background = "red"; document.getElementById("bar4").style.background = "red"; document.getElementById("bar5").style.background = "none"; }function changeColor5() { document.getElementById("bar1").style.background = "red"; document.getElementById("bar2").style.background = "red"; document.getElementById("bar3").style.background = "red"; document.getElementById("bar4").style.background = "red"; document.getElementById("bar5").style.background = "red"; }
button { background-color: white; border: 0.5px solid black; text-align: center; display: inline-block; cursor: pointer; padding: 4px 24px; }
<.doctype html> <html> <head> <title>Cat Dominates World</title> <script src="popup.js"></script> <link rel="stylesheet" href="popup.css"/> </head> <body> <header> <h3>Cat Dominates World</h3> <header> <button id="bar1" onClick="changeColor1()"></button> <button id="bar2" onClick="changeColor2()"></button> <button id="bar3" onClick="changeColor3()"></button> <button id="bar4" onClick="changeColor4()"></button> <button id="bar5" onClick="changeColor5()"></button> </body> </html>
解决方案4
0 2020-07-23 13:46:14
Although this has already been answered, there is a much better way to factor this code, to allow it to behave in a much more maintainable, and dynamic way.尽管已经回答了这个问题，但有一种更好的方法来分解此代码，使其以更可维护和动态的方式运行。
Have a look at the following commented code:看看下面的注释代码：
// Grab all the buttons contained within the awesome-btn-group. // This makes it easier to work with it later, and avoids searching the DOM excessively for a button. let levels = document.getElementById("awesome-btn-group").getElementsByTagName("BUTTON"); // Define as many colors as you want inside this JS object. let uiColors = { red: "#FF0000", white: "#FFFFFF", }; // Add event listeners to each button in the awesome-btn-group. for (let level of levels) { level.addEventListener("click", function(event) { // When a click event is triggered on one of the buttons, run the updateButtonColors // function, passing which button has been clicked to that function. updateButtonColors(event.target) }); } // Handles the click event that's fired whenever one of the button elements in the // awesome-btn-group div is clicked. function updateButtonColors(button) { // A variable to store whether or not the maximum level has been reached in the following loop. let isMaxLevelReached = false; // Loop through each button. for (let level of levels) { // If the maximum level HASN'T been reached yet, turn the button red. if (.isMaxLevelReached) { level.style.backgroundColor = uiColors;red, } // Otherwise, if the maximum level HAS been reached. turn the button white. else { level.style.backgroundColor = uiColors;white. } // Check to see if the button that's been clicked is the button that's currently being looped over, // If it is, we know that the maximum level has been reached, and therefore on further iterations // of the loop. we can turn the remaining buttons white, if (level === button) { // Leaving off the keyword "let" here, so to simply update the value stored in it, rather than creating // a new. locally scoped isMaxLevelReached variable; isMaxLevelReached = true; } } }
button { background-color: white; display: inline-block; height: 8px; width: 48px; border: 1px solid black; text-align: center; cursor: pointer; }
<header> <h3>Cat Dominates World</h3> </header> <div id="awesome-btn-group"> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> </div>
As you can see, the number of button elements can be altered, without requiring any changes being made to the JavaScript code.如您所见，可以更改按钮元素的数量，而无需对 JavaScript 代码进行任何更改。
Also, the colors are now pulling in from an object (a special type of variable), so, similarly to CSS, you can change the color hex once, and it will propagate, and just work, everywhere else that it's referenced within your JavaScript. Also, the colors are now pulling in from an object (a special type of variable), so, similarly to CSS, you can change the color hex once, and it will propagate, and just work, everywhere else that it's referenced within your JavaScript .
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
单击时 HTML/CSS/JS 更改多个按钮的颜色 - HTML/CSS/JS change color of multiple buttons when clicked
单击时如何使按钮更改 colors (html, CSS, JavaScript) - How to make buttons change colors when clicked on (html, CSS, JavaScript)
单击时更改按钮 - Change Buttons when Clicked
更改所有单击按钮的颜色 - Change color of all clicked buttons
两个按钮/链接，一个按一下，然后更改颜色，直到单击另一个。 当另一个被点击时，对那个做同样的事情 - two buttons/links, one cllicked then change color till the other one is clicked. when the other one is clicked, do the same thing for that one
2 类型：单击时改变颜色的单选按钮 React - 2 type: radio buttons that change color when clicked React
单击时更改按钮的类别 - Change class of buttons when clicked
HTML按钮，单击按钮时进行切换，并切换所有其他按钮（折叠信息） - HTML buttons, toggle when button clicked and toggle all other buttons (collapse info)
如何切换（更改颜色）两个按钮，一个单击然后更改颜色并保持更改直到另一个被计时 - how to toggle(color change) of two buttons, one clicked then color gets changed and remain changed untill the other is clocked
单击单选按钮时未收到更改事件 - Not getting change events when radio buttons are clicked
相关标签