ReferenceError in javascript. Character undefined in append function

Question

Adding tags using append function from jquery.

Here is the jquery code where it's blocking

tabSections(data).forEach(function(section){
    $("#sections nav ul").append("<li id='section_"+section+"' class='list_section' onClick='addText("+section+")'>" + section + "</li>");
});

And the HTML code from the browser

<li onclick="addText(287585-C)" class="list_section" id="section_287585-C">287585-C</li>

When I click on a li tag, it calls the function addText(section){} that is defined. The Reference Error I'm getting is that it doesn't recognize what I'm passing to my function as a complete string but as 2 numbers (a subtraction). Which is why an error stating that C is not defined is raised.

I'm trying to get a html code that should look like this

<li onclick="addText('287585-C')" class="list_section" id="section_287585-C">287585-C</li>

How can I modify my javascript code so that I have the 2 quotation mark that appear in the HTML code (and/or that the javascript interprets the argument as a string and not 2 numbers) ? The error is raised once I click on a tag

The toString() function didn't do anything either.

Thanks in advance

Answer 1

tabSections(data).forEach(function(section){
    $("#sections nav ul").append('<li id="section_'+section+'" class="list_section" onClick="addText(\''+section+'\')">' + section + '</li>');
});

Didnt run it...but try it

Answer 2

Change to this:

        $("#sections nav ul").append(
                             "<li id='section_'"+section+"'" 
                                  class='list_section' 
                                  onClick='addText("'+section+'")>' + section + 
                              "</li>");

Answer 3

You need to add the string delimiters but escape them with a \...

tabSections(data).forEach(function(section){
    $("#sections nav ul").append("<li id='section_"+section+"' class='list_section' onClick='addText(\""+section+"\")'>" + section + "</li>");
});