Javascript random cell background color change


Keywords:javascript 


Question: 

I am trying to create a table. ruudud.value is a value from <select>. But while this function is creating a table, I want it to place some random yellow cells in it. This is a small school project and this code is part of a code which should createbattleship game.

Also if possible. when it does create a random yellow cell, then could it also paint the next cell yellow? (to create a 2 cell ship).

function addTable() {

    var myTableDiv = document.getElementById("myDynamicTable");
    var table = document.createElement('TABLE');
    table.border = '1';

    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);
    var x = Math.floor((Math.random() * ruudud.value) + 0);
    var y = Math.floor((Math.random() * ruudud.value) + 0);

    for (var i = 0; i < ruudud.value; i++) {
        var tr = document.createElement('TR');
        tableBody.appendChild(tr);
        console.log(x + "," + y);
        for (var j = 0; j < ruudud.value; j++) {
            var td = document.createElement('TD');
            var td = document.getElementsByTagName("td");
            td.width = '50';
            td.height = '50';
            td.style.backgroundColor = "red";
            td.setAttribute("onClick", "colorChange(this)")
            td.innerHTML = (i + "," + j);
            if (td[i].innerHTML == (x + "," + y)) {
                td[i].setAttribute("style", "background:yellow;");

            }
            tr.appendChild(td);
        }
    }
    myTableDiv.appendChild(table);
}
function colorChange(tdObj) {
tdObj.style.backgroundColor = "green";}

example2:

function addTable() {

var myTableDiv = document.getElementById("myDynamicTable");


var table = document.createElement('TABLE');
table.border='1';

var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);
var x = Math.floor((Math.random() * ruudud.value) + 0);
var y = Math.floor((Math.random() * ruudud.value) + 0);

for (var i=0; i<ruudud.value; i++){
   var tr = document.createElement('TR');
   tableBody.appendChild(tr);
 console.log(x + ","+y);  
   for (var j=0; j<ruudud.value; j++){
        var td = document.createElement('TD');
        var td2 = document.getElementsByTagName("td");
        var i = 0, tds = td.length;
        td.width='50';
        td.height='50';
        td.style.backgroundColor="white";
        td.setAttribute("onClick", "colorChange(this)")
        td.innerHTML = (i +","+ j);
        if(td2[i].innerHTML == (x + "," + y)) {
            td2[i].setAttribute("style", "background:yellow;");

        }
        tr.appendChild(td);
        }
   }
myTableDiv.appendChild(table);
}
function colorChange(tdObj) {
tdObj.style.backgroundColor = "green";}

1 Answer: 

In both the cases, you are selecting the td element before it is appended to the DOM. You don't need to select it again, you can simply apply style to the td element when you create it. Here's a slight modification to your code. I have also added a condition to add two-cell ships like you asked.

function addTable(double) {
    var myTableDiv = document.getElementById("myDynamicTable");
    var table = document.createElement('TABLE');
    table.border = '1';

    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);
    var x = Math.floor((Math.random() * ruudud.value) + 0);
    var y = Math.floor((Math.random() * ruudud.value) + 0);

    for (var i = 0; i < ruudud.value; i++) {
        var tr = document.createElement('TR');
        tableBody.appendChild(tr);
        //console.log(x + "," + y);
        for (var j = 0; j < ruudud.value; j++) {
            var td = document.createElement('td');
            td.width = '50';
            td.height = '50';
            td.style.backgroundColor = "red";
            td.setAttribute("onClick", "colorChange(this)");
            td.innerHTML = (i + "," + j);
            if (x === i && y === j) {
                td.setAttribute("style", "background:yellow;");
            }
            // If you need to enable two-cell ships, pass true to the function
            // You can allow horizontal or vertical cells by changing x and ys in the equality checks below
            if(double){
                if(y+1 < ruudud.value){
                    if(x === i && y+1 === j){
                        td.setAttribute("style", "background:yellow;");
                    }
                }
                else{
                    if(x === i && y-1 === j){
                        td.setAttribute("style", "background:yellow;");
                    }
                }
            }
            tr.appendChild(td);
        }
    }
    myTableDiv.appendChild(table);
}

function colorChange(tdObj) {
tdObj.style.backgroundColor = "green";}

addTable(true);