Vrftsjtryk

I began js 3 days ago at school, I had some C basics before so the main problem here would be the syntax (I think).

The goal is to produce a chessboard, 8x8 black and white square, but I can't get the code to show anything. What am I missing ?

(the html just have the script src="./x.js" part and the "body" part)

document.body.onload = addElement.innerHTML;



function addElement() {



    var newTable = document.createElement("table");

    for (var i = 1; i < 9; i++) {

        var newTr = document.createElement('tr');

        for (var j = 1; j < 9; j++) {

            var newTd = document.createElement('td');

            if (i % 2 == j % 2) {

                newTd.className = "white";

            } else {

                newTd.className = "black";

            }

            newTr.appendChild(newTd);

        }

        newTable.appendChild(newTr);

    }



    document.body.appendChild(newTable);



    document.getElementByClass("black").style.backgroundColor = "black";

    document.getElementByClass("white").style.backgroundColor = "white";

    document.getElementByTag("newTd").style.width = "25px";

    document.getElementByTag("newTd").style.height = "25px";

}

There are few mistakes in your code use getElementsByClassName instead of getElementByClass and use getElementsByTagName instead of getElementByTag.

Also you need to loop over each selected elements.

Use window.onload = addElement; or you can simply call addElement(); after function declaration completes.

window.onload = addElement;



function addElement() {

  var newTable = document.createElement("table");

  for (var i = 1; i < 9; i++) {

    var newTr = document.createElement('tr');

    for (var j = 1; j < 9; j++) {

      var newTd = document.createElement('td');

      if (i % 2 == j % 2) {

        newTd.className = "white";

      } else {

        newTd.className = "black";

      }

      newTr.appendChild(newTd);

    }

    newTable.appendChild(newTr);

  }



  document.body.appendChild(newTable);

  var i = 0;

  for (i = 0; i < document.getElementsByClassName("black").length; i++) {

    document.getElementsByClassName("black")[i].style.backgroundColor = "black";

  }

  for (i = 0; i < document.getElementsByClassName("white").length; i++) {

    document.getElementsByClassName("white")[i].style.backgroundColor = "white";

  }

  for (i = 0; i < document.getElementsByTagName("td").length; i++) {

    document.getElementsByTagName("td")[i].style.width = "25px";

    document.getElementsByTagName("td")[i].style.height = "25px";

  }



}

A simpler approach would be to add the attributes when you create each element and not after. Like this:

if (i % 2 == j % 2) newTd.style.backgroundColor = "white";



else newTd.style.backgroundColor = "black";



newTd.style.width = "25px";



newTd.style.height = "25px";

See this fiddle: http://jsfiddle.net/vdquLn65/2/

About your current code you could use getElementsByClassName and getElementsByTagName and iterate over the elements they return to do what you want.

As you currently have it, addElement.innerHTML is a reference to the innerHTML property of the addElement variable. addElement is a reference to a function definition, and does not have an innerHTML property.

Try changing your first line to this:

window.onload = addElement;

See: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

Edit: I was a bit too quick to post this, and didn't spot the other errors in the code as mentioned in Karan's answer.

Hello Jaune and welcome to Stack Overflow. I have added an answer that will create the data first and then map that that data to elements using functions. If you have any questions please let me know.

const field = ([x, y, color]) => {

  const td = document.createElement('td');

  td.setAttribute('data-x', x);

  td.setAttribute('data-y', y);

  td.className = color;

  td.innerHtml = `${x}-${y}`;

  return td;

};

const row = (row) => {

  const tr = document.createElement('tr');

  row.forEach((fieldItem) =>

    tr.appendChild(field(fieldItem)),

  );

  return tr;

};

const table = (tableData) => {

  const table = document.createElement('table');

  tableData.forEach((rowData) =>

    table.appendChild(row(rowData)),

  );

  return table;

};

const tableData = Array.from(Array(8).keys()).map((x) =>

  Array.from(Array(8).keys()).map((y) => [

    x,

    y,

    (x + y) % 2 ? 'black' : 'white',

  ]),

);

document.body.appendChild(table(tableData));

.black {

  width:10px;

  height:10px;

  background-color: black;

}

.white {

  width:10px;

  height:10px;

  background-color: white;

}

table {

  border: 1px solid black;

}

As an alternative approach, consider coloring the table itself black and only coloring the corresponding tiles white:

window.onload = addElement;



function addElement() {

  var tbl = document.createElement('table');

  tbl.style.backgroundColor = 'black';



  for (var i = 1; i < 9; i++) {

    var tr = document.createElement('tr');



    for (var j = 1; j < 9; j++) {

      var td = document.createElement('td');

      td.style.width = '25px';

      td.style.height = '25px';



      if (i % 2 == j % 2) {

        td.style.backgroundColor = 'white';

      } 



      tr.appendChild(td);

    }



    tbl.appendChild(tr);

  }



  document.body.appendChild(tbl);

}

And also, as Alex G said, it's much simpler to do the styling at the time the element is created instead of trying to iterate over them later. I understand the mindset of separating the logic and style portions of the code, but in this case it isn't really worth the added effort and complexity, and there are better ways to do it anyway.

And besides, if you wanted to separate the style from the logic, that's what CSS files are for. :P