How to Select and Modify a group of html

Question

I am trying to enable and change the background color of a (specific) set of buttons. How would I go about grouping these buttons and calling them so I do not need to set a specific Id for each?

EDIT:

To give more insight into what I am trying to do. Buttons are all laid out as such:

<button onclick="keyPress('e')">e</button>

What I tried doing(also tried Id and Name):

//light up keys
//document.getElementsByTagName("button").style.backgroundColor = 'silver';

//activate keys
//document.getElementsByTagName("button").disabled = false;

I'm assuming the asker is trying to change the background of the buttons on the fly, not have them set by default. — Snowburnt, Oct 02 '13 at 16:55
The best way to group elements is by classes, you'll have to assign the same class to buttons that you want grouped together. With no other attributes being assigned to your buttons there's absolutely no way for javascript to know how to differentiate them, unless you do something random like assign the color to every other button in the collection — Snowburnt, Oct 02 '13 at 17:35

score 0 · Accepted Answer · edited May 23 '17 at 11:50

0

use jquery...

$("button").css("background", new color)

if you want groups of buttons use the class attribute:

$("button.class1").css("background", new color)

for javascript:

var buttons=getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) { 
   buttons[i].style.backgroundColor="newcolor";
}

here's a way to do it by class name so that you can group elements by class with pure javascript: How to Get Element By Class in JavaScript?

to enable buttons set the element button element .enabled=true or false

edited May 23 '17 at 11:50

Community

1
1

answered Oct 02 '13 at 16:46

Snowburnt

6,523
7
30
43

1

He's not asking for a jquery solution – Thanh Trung Oct 02 '13 at 16:47
Updated for javascript – Snowburnt Oct 02 '13 at 16:53
I have not tested this, but I assume this would get all the buttons on the page. I am just trying to change a specific group of buttons. Sorry for my question not being very clear. – Michael McCormick Oct 02 '13 at 17:08
yes, the first javascript would get all of the buttons. the link I included "How to get elements by class in javascript" would tell you how to get the buttons of a particular class. The most effective way of grouping elements is by assigning classes to them. – Snowburnt Oct 02 '13 at 17:33
Thank you. I should have read the entire link before I answered. – Michael McCormick Oct 02 '13 at 17:42

Sterling Archer · Answer 2 · 2013-10-02T18:19:09.703

0

If we're talking pure javascript:

Select them into an array with var array = document.getElementsByTagName("button"); and manipulate within a loop. You can either set them to a css class using .className = "whatever" or you can manually set it using the .style = "whatever" object

Loop to check className:

for (i=0; i<array.length; i++) {
    if (array[i].className == [whatever condition]) {
        array[i].style.backgroundColor = "whatever"; 
        //or array[i].className = "whatever"
    }
}

edited Oct 02 '13 at 18:19

answered Oct 02 '13 at 16:46

Sterling Archer

22,070
18
81
118

I appreciate this answer, but I am looking for a way that will only select certain buttons on the page. Ideally I would be able to "document.getElementsByClass". – Michael McCormick Oct 02 '13 at 17:10
This will be more code, but it can still achieve the same. It would require an if statement inside the loop -- undesirable. Please be more specific in your questions ;) – Sterling Archer Oct 02 '13 at 17:13
What would I be able to check by? Is there a way to do something like: if (className === keyBoard) – Michael McCormick Oct 02 '13 at 17:15
Thanks for the reply, you've been using C++ lately I see though – Michael McCormick Oct 02 '13 at 18:35
On the contrary, I have never studied or used C++ before. – Sterling Archer Oct 02 '13 at 18:35

Viji · Answer 3 · 2013-10-02T17:59:46.127

0

Create a "css class" and apply the same class to all the button.

<style>
.btn-color
{
   background-color:grey;
}
</style>

<input type="button" id = "btn1" class = "btn-color" />
<input type="button" id = "btn2" class = "btn-color" />
<input type="button" id = "btn3" class = "btn-color" />
<input type="button" id = "btn4" class = "btn-color" />

For Dynamically , then using JQuery

 $(".btn-color").css("background-color","grey")

Using Javascript

var elements = document.querySelectorAll(".btn-color");
for (var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor = "blue";
}

JSFiddle : http://jsfiddle.net/EmzH8/

edited Oct 02 '13 at 17:59

answered Oct 02 '13 at 16:49

Viji

2,629
1
18
30

then use $(".btn-color").css("background-color","grey"). you can use hexa value also for color – Viji Oct 02 '13 at 17:08
I am guessing that is JQuery, I am looking for a purely JS/HTML answer. Thanks for the replies though. – Michael McCormick Oct 02 '13 at 17:11
@Mike: i have updated the ans....this will do that trick u asked, (specific group of button)... – Viji Oct 02 '13 at 18:01

score -1 · Answer 4 · answered Oct 02 '13 at 16:57

-1

if you are searching for code to dynamically change background of a set of buttons try this:

css:

.myClass{
background-color:red;
}

js:

function changeBG(){
var inputs=document.getElementsByTagName("input")
var buttons=document.getElementsByTagName("button")

for(var i=0;i<inputs.length;i++){
var input=inputs[i]
if(input.type=="button"){
input.className="myClass"
}
for(i=0;i<buttons.length;i++){
var button=buttons[i]
button.className="myClass"

}

}

remember, this code will change background of all the buttons in your page

answered Oct 02 '13 at 16:57

Nishad K Ahamed

1,374
15
25

I don't think, you need for loop, to do this. You can use simple jquery selector and do it by addClass(). – Viji Oct 02 '13 at 17:02
@Viji, He's not asking for a jquery solution – Nishad K Ahamed Oct 02 '13 at 17:07
Do you know of a way this could be modified to change only a certain set of buttons on the page? – Michael McCormick Oct 02 '13 at 17:25
@Nishad Nichoos: Hi, i didnt notice the question abt "Javascript"... if you edit the ans.. then only i can give upvote...Sorry – Viji Oct 02 '13 at 18:00

How to Select and Modify a group of html's using JavaScript function

4 Answers4

How to Select and Modify a group of html