How do I output values from a javascript variable into an html td cell?

Question

I have this function that generates a table where users can input numbers from 0-9.

function table(){
    let strHTML = "";    
    strHTML = "<table>";
    for(let row = 0; row< 9; row++){
    strHTML += "<tr>";
        for (let col = 0; col < 9; col++){
            strHTML += `<td><input id=${row}-${col} type="number" min="0" max="9" /></td>`;
         }
     strHTML += "</tr>";
     }
     strHTML += "</table>";
     document.getElementById('myTable').innerHTML = strHTML;
};

I have a function that saves the values from the HTML table in a javascript array.

function saveTable(){
    for(let col = 0; col < 9; col++){
            for(let row = 0; row < 9; row++){
                sudokuArr[col][row] = Number(document.getElementById(col+"-"+row).value); 
            }
        }
};

Finally I have this function which adds two numbers and displays it in a different cell. however whenever this function gets called nothing gets outputted. Not sure what I’m doing wrong?

function calculate(){
    var x = sudokuArr[0][0];
    var y = sudokuArr[0][8];
    var k = x + y;
    document.getElementById("0-1").innerHTML = k;
};

ids that start with numbers won't be recognized

JJJ
– JJJ

2017-07-19 23:31:19 +00:00
Commented Jul 19, 2017 at 23:31 — JJJ
– JJJ, Commented Jul 19, 2017 at 23:31

JJJ · Accepted Answer · 2017-07-19 23:43:18Z

3

The element's id cannot begin with a number because it won't be recognized. Look at my example below: it throws an error with the id that starts with a number.

...an ID should start with a letter for compatibility.

Source: https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/id

document.querySelector('#c123').innerHTML = 'starts with a letter';
document.querySelector('#123c').innerHTML = 'starts with a number';

<div id="123c"></div>
<div id="c123"></div>

edited Jul 19, 2017 at 23:43

answered Jul 19, 2017 at 23:35

JJJ

3,3525 gold badges31 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sauntimo Over a year ago

hyphens can also cause issues - see this on MDN

JJJ Over a year ago

@sauntimo in this case, it's the lack of a letter at the beginning. thanks for posting a link to the MDN docs tho :-D

Jarek Kulikowski · Accepted Answer · 2017-07-19 23:44:23Z

I've made some corrections to your code, you should be on your way.

    var pref = 'X';
    function table(){
        let strHTML = "";
        strHTML = "<table>";
        for(let row = 0; row< 9; row++){
        strHTML += "<tr>";
            for (let col = 0; col < 9; col++){
                strHTML += `<td><input id=${pref}${row}-${col} type="number" min="0" max="9" /></td>`;
         }
     strHTML += "</tr>";
     }
     strHTML += "</table>";
     document.getElementById('myTable').innerHTML = strHTML;
    };
    table();

    var sudokuArr = [];
        function saveTable(){
            for(let col = 0; col < 9; col++){
                    typeof sudokuArr[col] == 'undefined' && (sudokuArr[col] = []);
                    for(let row = 0; row < 9; row++){
                        sudokuArr[col][row] = Number(document.getElementById(pref + col+"-"+row).value);
                    }
                }
        };
    saveTable();

    function calculate(){
        var x = sudokuArr[0][0];
        var y = sudokuArr[0][8];
        var k = x + y;
        var el = document.getElementById(pref + "0-1");
        el.value = k;
    };
    calculate();

    <table id="myTable"></table>

Daniel Ormeño · Accepted Answer · 2017-07-19 23:47:05Z

Expanding on Josan's answer. Because you are setting the value of an input field, use document.getElementById("...").value. See snippet below for populating the grid.

Also, I would wrap the id in quotes to make things clearer. <td><input id="cell${row}-${col}" type="number" min="0" max="9" /></td>

function table(){
    let strHTML = "";    
    strHTML = "<table>";
    for(let row = 0; row< 9; row++){
    strHTML += "<tr>";
        for (let col = 0; col < 9; col++){
            strHTML += `<td><input id="cell${row}-${col}" type="number" min="0" max="9" /></td>`;
         }
     strHTML += "</tr>";
     }
     strHTML += "</table>";
     document.getElementById('myTable').innerHTML = strHTML;
};

function fill(){
    var count = 1;
    for(let col = 0; col < 9; col++){
        for(let row = 0; row < 9; row++){
            document.getElementById(`cell${row}-${col}`).value = count;
            count++;
        }
    }
};

table();
fill();

<table id="myTable"></table>

Collectives™ on Stack Overflow

How do I output values from a javascript variable into an html td cell?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related