Trouble with JavaScript arithmetic and NaN values from the DOM

Question

The problem I'm having is with my function calculate(). The purpose of the program is creating a dynamic spreadsheet with JavaScript and html, with a CSS for decoration purposes.

So far I have it insert the values into the spreadsheet, however when attempting to run a simple addition calculation on it the values that I'm grabbing from the cells are not properly being grabbed.

Here's the function in specific that's giving me the problem. My apologies for the sloppy code. Any help would be appreciated, I'm sure it's something simple that I'm missing.

EDIT:: Corrected the issue, for those of you wondering, I had to call not innerHTML.text, or value. It had to be simply the .innerHTML on the cell in question.

function calculate() {
    //create two variables to get the values in the row and columns
    var row1, row2, col1, col2, total, totalInsert;

    var row = document.getElementById("row");
    var col = document.getElementById("col");
    var value = document.getElementById(row + "_" + col);
    var formula = document.getElementById("inputText");

    formula = formula.value; //=SUM(1,2,2,1)
    formula1 = formula;

    //get the raw values to ints
    row = row.value;
    col = col.value;

    //get JUST the formula in questions part    
    formula = formula.substr(0,4);

    //Parsing the the selected cells from =sum(1,1,2,1) into  Cell ID's
    col1 = parseInt(formula1.substr(5, 1));//row 1
    row1 = parseInt(formula1.substr(7, 1));
    col2 = parseInt(formula1.substr(9, 1));
    row2 = parseInt(formula1.substr(11, 1)); // column2

    //this gives us the proper cell's address. id=1_1 
    var td1 = col1 + "_" + row1;
    var td2 = col2 + "_" + row2;

    //problem starts around here
    var sum = document.getElementById(td1);
    var sum2 = document.getElementById(td2);

    //this returns a undefined value
    sum = sum.value;
    sum2 = sum2.value;

    //this restults in a NaN
    sum = parseInt(sum);
    sum2 = parseInt(sum2);

    //creating the total value
    total = sum + sum2;

    //returning values
    totalInsert = document.getElementById(td1).innerHTML = total;
}

it may be related to having invalid ids. see [what are valid values for the id attribute?](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html) — jbabey, Oct 23 '12 at 14:38
Are you reading a with id "1_1"? if so there is no `value` you get its content with innerHTML/Text otherwise as you say you will get undefined. Also you can access the cells as a matrix directly; `thetable.rows[1].cells[1].innerHTML` (numeric IDs are ok in HTML5 only) — Alex K., Oct 23 '12 at 14:42
the id's are labeld as row 1_1 column, 1_2, etc. I'll try the .text and parse it into a int. — CTully12, Oct 23 '12 at 16:09
If you're trying to create a spreadsheet application, you should not store your data in the DOM. Use an appropriate data structure. — Bergi, Oct 23 '12 at 16:52
I would've prefered to even use a JQuery process (from what I found it was easier to do it that way) how ever being a student, we were required to do it this way. AGain I did finish this and get it fixed. I agree, using a DOM for this process is unnecessary. — CTully12, Oct 23 '12 at 20:31

Pebbl · Answer 1 · 2012-10-23T17:11:33.247

This part seems odd to me, you are selecting two elements and then combining them as a string to find another element?

var row = document.getElementById("row");
var col = document.getElementById("col");
var value = document.getElementById(row + "_" + col);

I'm not sure that would do what you are expecting... In my experience you'd get something like this:

document.getElementById('[object Object]_[object Object]');

or:

document.getElementById('[object HTMLDivElement]_[object HTMLDivElement]');

... depending on the browser. Now obviously you could have an element with that kind of id, but that would be a little bit bonkers ;)

It looks to me like the row and col elements are inputs, so maybe you actually mean:

var row = document.getElementById("row");
var col = document.getElementById("col");
var value = document.getElementById(row.value + "_" + col.value);

Trouble with JavaScript arithmetic and NaN values from the DOM

1 Answers1