CODEWITHSUNDEEP
javascriptjqueryhtmlcss
NITISH
NITISH

Reputation: 155

How to get css property of dynamic table created by javascript?

This is javascript code for creating dynamic table it creates a crossword

function generateTable(range) {
    document.write("<table style='border: 1px solid black;'>");
    for (var a = 1; a < 10; a++) {
        document.write("<tr >");
        for (var b = 1; b < 10; b++) {
            if (a % 2 == 0 && b % 2 == 0) {
                document.write("<td style='border: 1px solid black;'><button style='width:50px; height:50px; background-color:black'></button></td>");
            } else {
                document.write("<td style='border: 1px solid black;'><button style='width:50px; height:50px; background-color:white' ></button></td>");
            }
        }
        document.write("</tr>");
    }
    document.write("</table>");
}

output is something like this enter image description here

I want to count the n of black boxes with different function I have tried with getelementsbytagname() but it's not working please help me with this

Upvotes: 0

Views: 92

Answers (5)

John T
John T

Reputation: 335

The advice to change to CSS is great, but if you had reason to leave it as is and still wanted to count, here you go:

var list = document.getElementsByTagName("BUTTON");
var whites = 0, blacks=0;
for (var i=0; i < list.length; i++) {
    color = list[i].style.backgroundColor;
    if (color == 'white') whites++;
    else if (color == 'black') blacks++;

    // to add an index: 
    // list[i].setAttribute('data-index',i+10);
}

console.log('w:'+whites+", b:"+blacks);

References: https://www.w3schools.com/jsref/met_document_getelementsbytagname.asp

Upvotes: 0

Hermenpreet Singh
Hermenpreet Singh

Reputation: 474

You can use this for count number of black box. You can get elements by tag name. You can get it by className which is the best way you can easily get count.

var list = document.getElementsByTagName("Button");
var count=0;
    for(var k=0;k<list.length;k++)
    {
        if(list[k].style.backgroundColor=='red')
            count++;
    }
console.log("number of black box--",count);

Upvotes: 0

vicky patel
vicky patel

Reputation: 705

function generateTable()
{

document.write("<table style='border: 1px solid black;'>");
for (var a=1; a <10; a++) {
document.write("<tr >");
for(var b=1; b<10; b++) {
if(a%2==0 && b%2==0 )
{
document.write("<td style='border: 1px solid black;'><button id='blk' style='width:50px; height:50px; background-color:black'></button></td>");


}
else
{
document.write("<td style='border: 1px solid black;'><button style='width:50px; height:50px; background-color:white' ></button></td>");
}

}
document.write("</tr>");
}
document.write("</table>");
console.log("BlackBox :"+ document.querySelectorAll('#blk').length)
}

generateTable()

Upvotes: 0

Prajwal
Prajwal

Reputation: 4000

I would suggest you to use CSS for displaying purpose. To this, you will have to add class to each of the button. 

function generateTable(range) {
  document.write("<table>");
  for (var a = 1; a < range; a++) {
    document.write("<tr >");
    for (var b = 1; b < range; b++) {
      if (a % 2 == 0 && b % 2 == 0) {
        document.write("<td ><button class='black'></button></td>");


      } else {
        document.write("<td ><button class='white'></button></td>");
      }
    }
    document.write("</tr>");
  }
  document.write("</table>");
}
generateTable(10);

console.log("total Black " + document.getElementsByClassName("black").length); //<-- count of black
console.log("total white " + document.getElementsByClassName("white").length); //<-- count of white
//using query selector
console.log("total Black " + document.querySelectorAll(".black").length); //<-- count of black
console.log("total white " + document.querySelectorAll(".white").length); //<-- count of white
table,
td {
  border: 1px solid black;
}

button.black {
  width: 50px;
  height: 50px;
  background-color: black;
}

button.white {
  width: 50px;
  height: 50px;
  background-color: white;
}

Upvotes: 1

Gorka Hernandez
Gorka Hernandez

Reputation: 3958

Although querying by style properties is possible, I think you may be better off creating the back boxes using a class instead on inline styles like so:

document.write("<td style='border: 1px solid black;'><button style='box box-black'></button></td>");

Adding the required CSS:

.box {
  width:50px;
  height:50px;
}

.box-black {
  background-color: black;
}

And then simply querying the class you want:

const blackBoxes = document.querySelectorAll('.box-black').length;

Upvotes: 0

Related Questions