I get NaN when I try to insert some HTML into a DIV element with jQuery

Question

I am tring to display a text box when a element of class numObj is clicked. For some reason I get NaNNaNaNaNNaNNaNaNaN where I expect to the see the result of the searchForm variable in the code below.

I know that NaN stands for Not a Number. What I don't understand is why is Javascript expecting a number? I can't understand why it cares.

$(".numObj").live('click',function(){
   var preId = $(this).attr('preId');
   var arrayPos = $(this).attr('numArrayPos');

        alert(preId +" "+arrayPos);

        var searchForm = "<table border='0' cellspacing='0' cellpadding='4' id='add-tag2'>"+
          +"<tr class='normal'><td bgcolor='#EEEEEE' valign='bottom' nowrap='nowrap'><span class='normal-small'>"+
          +"<input name='predicate-name2' type='text' class='normal' id='predicate-name2' size='4' />"+
          +"</span></td>"+
          +"<td bgcolor='#EEEEEE' valign='bottom' nowrap='nowrap'><span class='normal-small'>&lt;=</span></td>"+
          +"<td bgcolor='#EEEEEE' valign='bottom' nowrap='nowrap'>x</td>"+
          +"<td valign='bottom' bgcolor='#EEEEEE'>&lt;=</td>"+
          +"<td valign='bottom' bgcolor='#EEEEEE'><span class='normal-small'>"+
          +"<input type='text' name='object-object2' id='object-object2' class='normal' size='4' />"+
          +"</span></td>"+
          +"</tr>"+
          +"</table>";
        $(".numObj").filter("[preId='"+preId+"']").filter("[numArrayPos='"+arrayPos+"']").html(searchForm);

    });

The generated code that has the numObj class looks something like this

<td><div class="numObj" preid="73" numarraypos="5"><span class="normal">585.0</span></div></td>

your numArrayPos attribute has different cAsEs in your JS and HTML - was this a typo? If not you will have issues accessing the attribute. — scunliffe, May 27 '10 at 10:46
Why don't you do a debug? The var searchForm is having multiple '+' signs side by side. — Kangkan, May 27 '10 at 10:46
@Kangkan - what do you recommend for debugging javascript - this is a bbig problem I have. — Ankur, May 27 '10 at 12:59
I use FireFox and FireBug. The IE also ships a developer tool (Hit F12) and that allows nice debug facilities. You can add variables to watch and also put conditional debug points. — Kangkan, May 27 '10 at 13:08
Thanks, I am having a problem. Firebug won't show me most of my javascript? I'll have to figure it out. I was wondering if you know of any Eclipse plugins that would embed the JS rules into Eclipse and let you debug as you code ... I've googled a few but from what I can see they don't inspire confidence. — Ankur, May 27 '10 at 13:13

score 21 · Accepted Answer · edited May 23 '17 at 12:34

21

The problem, as others have pointed out is the + operator. Aside from concatenating strings, it is also used as mathematical addition. Because of Javascript's dynamic typing, use of unary + alone on a string will cause the string to be converted into a number:

+"12"; // -> 12
+"10" + +"12" // -> 22

Several lines of your code have the + operator at the end of the line and the beginning of the new line. The second + will be treated as a unary mathematical addition and will attempt to convert the string to a number. Consider the following:

"Hello" +
+ "World" // -> "HelloNaN"

edited May 23 '17 at 12:34

Community

1
1

answered May 27 '10 at 10:54

Andy E

338,112
86
474
445

2

Thanks Andy - I am selecting your answer because it gives more information about the NaN error. – Ankur May 27 '10 at 13:01

GlenCrawford · Answer 2 · 2010-05-27T11:05:25.143

You have multiple plus operators next to each other.

var searchForm = "<table border='0' cellspacing='0' cellpadding='4' id='add-tag2'>"+
+"<tr class='normal'><td bgcolor='#EEEEEE' valign='bottom' nowrap='nowrap'><span class='normal-small'>"+

Note that there is a plus operator at the end of the first line, and one at the start of the last line. Remove one of these plus operators (for each line), and you'll probably get rid of the error.

By the way, JSLint finds these errors in a jiffy.

score 4 · Answer 3 · answered May 27 '10 at 10:47

Take the + symbols off the end each line of var searchForm

var searchForm = "<table border='0' cellspacing='0' cellpadding='4' id='add-tag2'>"
      +"<tr class='normal'><td bgcolor='#EEEEEE' valign='bottom' nowrap='nowrap'><span class='normal-small'>"
      +"<input name='predicate-name2' type='text' class='normal' id='predicate-name2' size='4' />"
      +"</span></td>"
      +"<td bgcolor='#EEEEEE' valign='bottom' nowrap='nowrap'><span class='normal-small'>&lt;=</span></td>"
      +"<td bgcolor='#EEEEEE' valign='bottom' nowrap='nowrap'>x</td>"
      +"<td valign='bottom' bgcolor='#EEEEEE'>&lt;=</td>"
      +"<td valign='bottom' bgcolor='#EEEEEE'><span class='normal-small'>"
      +"<input type='text' name='object-object2' id='object-object2' class='normal' size='4' />"
      +"</span></td>"
      +"</tr>"
      +"</table>";

score 0 · Answer 4 · answered May 27 '10 at 10:47

0

Making the entire searchForm variable only exist on a single line makes it work ... but this is not elegant. If there are any better solutions I would be keen to know.

answered May 27 '10 at 10:47

Ankur

50,282
110
242
312

2

Could you hide the HTML within the page and change according to your needs? – Sam May 27 '10 at 10:49
1

I very much support @Sam's suggestion. – GlenCrawford May 27 '10 at 11:00
Yes I am actually going to do that. It makes more sense. – Ankur May 27 '10 at 13:00

I get NaN when I try to insert some HTML into a DIV element with jQuery

4 Answers4