Can anything else cause a syntax error when injecting code beside a typo?

Question

I inject in html code into a html and although all my other buttons work this pacific button which sends data to a sqlite database gives me the following error.

Uncaught SyntaxError: missing ) after argument list

The problem is I've reviewed the code and tried different approaches and since im injecting the code it wont catch whats wrong only points to DOCTYPE?

The HTML being injected:

 $(info).html('<h4 class="media-heading">' + response[rCnt].title + '</h4><h3><span class="glyphicon glyphicon-star" aria-hidden="true">    </span>  ' + response[rCnt].social_rank.toFixed(2) + '</h3><h3><span class="glyphicon glyphicon-print" aria-hidden="true">    </span>   ' + response[rCnt].publisher + '</h3><h3><span class="glyphicon glyphicon-home" aria-hidden="true">    </span>  <a> ' + response[rCnt].source_url + '</a></h3><button type="button" class="btn btn-default" id="button1" onclick="saveRecipe(' + response[rCnt].title + ',' + response[rCnt].social_rank.toFixed(2) + ',' + response[rCnt].publisher + ',' + response[rCnt].source_url + ')"  title="Save"><span class="glyphicon glyphicon-save" aria-hidden="true"></span></button>');

HTML button inside so its easier to read:

<button type="button" class="btn btn-default" id="button1" onclick="saveRecipe(' + response[rCnt].title + ',' + response[rCnt].social_rank.toFixed(2) + ',' + response[rCnt].publisher + ',' + response[rCnt].source_url + ')"  title="Save"><span class="glyphicon glyphicon-save" aria-hidden="true"></span></button>

The AJAX call that the HTML button provides data to:

function saveRecipe(title, rank, auth, src) {
    $.ajax({
        type: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        url: "/SaveFile",
        data: JSON.stringify({
            name: title,
            rating: rank,
            author: auth,
            source: src
        }),
        success: function(response) {
            console.log("Hii");
            console.log(response);
        },
        error: function(response, error) {
            console.log(response);
            console.log(error);
        }
    });
}

Answer 1

I played around with this for a good while, looks like you need some extra quotes in your onClick. If, for example, the title was "Soup", then onClick was looking for a variable named Soup -- not passing a value of "Soup". This is difficult to work with because that big $(info).html statement already has both single and double quotes. But I got this to work:

var onclickstring = "saveRecipe('" + response[rCnt].title + "','" + response[rCnt].social_rank.toFixed(2) + "','" + response[rCnt].publisher + "','" + response[rCnt].source_url + "')";

and then plug that in like so:

id="button1" onclick=' + onclickstring + ' title