Qfyilyi

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";

  }



}

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.

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.

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;

}