How to add to HTML table cells a uniquely named JavaScript function

Question

I have a Sudoku table which I've generated using JavaScript. After generating the table, I've also attached a number entry field as well as a function to each cell. Currently, the function passes in only the very last cell id that was generated (ex. R9C9), not the cell that was recently modified. I would rather have the function get passed the current cell id which the user modified so that I can check the row, column, and current square for conflicts and not every single cell on the board. I'm trying not to use jQuery, but any help would be appreciated.

This is the code that attaches the number field, as well as the function. I believe currently the function it attaches is anonymous, which wouldn't matter as long as I could get the attached anonymous function to be associated with the current cell.

for (i = 1; i <=9; i++)
{
    for (j = 1; j <= 9; j++) {
        temp = document.getElementById('R'+i+'C'+j);
        if (temp.innerHTML == "")
        {
            var temp2 = temp.appendChild(document.createElement("input"));
            temp2.type = "number";
            temp3 = document.getElement('R'+i+'C'+j);
            temp2.onkeyup = function(){conflictChecker(temp3)};
        }
    }
}

This is the code for generating the table. function makeGrid(x, y, name) {

var tableDiv = document.getElementById("gameTable");
var table = document.createElement('table');
table.id = "theTable";



table.style.width = '100px';
table.style.border = 'thick solid black';

for (var i = 1; i <= x; i++) {
    var row = table.insertRow();
    row.id = "Row" + i;

    for (var j = 1; j <= y; j++) {
        var cell = row.insertCell();
        cell.id = "R" + i + "C" + j;
        cell.classList.add();
        cell.style.border = '1px solid';
        if((i%3) == 0)
        {
            cell.style.borderBottom = "thick solid black";
        }
        if(((j-1)%3) == 0)
        {
            cell.style.borderLeft = "thick solid black";
        }

    }



}
tableDiv.appendChild(table)

The original elements of the table I add using so the user cannot modify them.

document.getElementById("R_C_").innerHTML = "someNumber";

I tried taking the assingment of the functions out of the orinal function by adding this

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

for (j = 1; j <= 9; j++) {
    temp = document.getElementById('R' + i + 'C' + j);
    temp.onkeyup = function(){conflictChecker(temp)};
}

}

Any help would be immensely appreciated. I've tried several different types of syntax, but they don't seem to be working.

There is nothing as `temp3 = document.getElement('R'+i+'C'+j);` Kindly update it with `document.getElementById('R'+i+'C'+j);` — pratikpawar, Jan 29 '16 at 18:06
at the time the event occurs... temp is already the last value within the loop — charlietfl, Jan 29 '16 at 18:07
I tried assigning the function to the cells outside of the current function. It made the entire table disappear. The question you linked to has some of the same principles, but the implementation I'm attempting is different as I'm trying to attach this function to an HTML table, not an array. If it's not please explain to me why — Giovanni, Jan 29 '16 at 18:49

score 1 · Answer 1 · answered Jan 29 '16 at 18:02

1

What's happening is that the javascript is not computing the value of temp3 - it's keeping it as a variable until the function is called, and then it computes the value, which will be equal to what it was during the very last iteration...

Did you try this?

temp2.onkeyup = function(){conflictChecker(this.parent)};

answered Jan 29 '16 at 18:02

Timothy Kanski

1,861
14
20

this isn't true. `temp` is being over written each iteration and at the time the event occurs it has already been processed through the whole loop – charlietfl Jan 29 '16 at 18:10
@charlietfl it seems like we're both trying to say the same thing. by the time the function is called, the value of temp3 is R9C9... he used temp3 thinking that it would be iterated and print "R1C1" followed by "R1C2" etc. when in reality, it isn't computed until run time, when it is always coming up as R9C9 – Timothy Kanski Jan 29 '16 at 18:21
Thanks for your help! It definitely pointed me the right direction to go in. – Giovanni Feb 03 '16 at 16:43

score 0 · Accepted Answer · answered Feb 03 '16 at 16:36

I solved my problem. For some reason using the onkeyup function for my event wasn't working. I switched it to onchange() and was able to get the current cell by passing in 'this'

for (i = 1; i <=9; i++)
{
    for (j = 1; j <= 9; j++) {
        temp = document.getElementById('R'+i+'C'+j);
        if (temp.innerHTML == "")
        {
            var temp2 = temp.appendChild(document.createElement("input"));
            temp2.type = "number";
            temp2.id = 'R'+i+'C'+j+'2';
            temp2.onchange = function(){conflictChecker(this)};
        }
        else
        {
            theVal = temp.innerHTML;
            temp.value = theVal;
            temp.id = 'R'+i+'C'+j+'2';
        }
    }
}

I assigned different Id's as well so that I could look up the value of the cell from conflictChecker. Probably not the most elegant solution but it works.

How to add to HTML table cells a uniquely named JavaScript function

2 Answers2