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>

Answer 1

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.

Answer 2

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>";

Answer 3

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.

Answer 4

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"