Alex Rivera | Logout

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

Asked 2010-05-27T10:41:59.567
11

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>
Edit
Report

1 Answer

22

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" 
answered 2010-05-27T10:54:05.653

Your Answer