String will not convert to uppercase when placed as argument value

Question

I am trying to place a dynamic argument value in a onclick function. The problem is that it seems to convert it to lowercase as well as adds an extra space in front of it. Any help would be greatly appreciated, thank you.

Here is a codepen.io of my code: http://codepen.io/theller5567/pen/GZwBrE?editors=1010

Here is my function:

createList: function(scope){
      var country = scope;
      var cc = country.countryCode;
      var ccc = cc.toUpperCase();
      console.log(ccc);
      if(ccc){
         var listItem = '<li><a href="#" onclick="setCountry("'+ccc+'","'+country.country+'");getDistribution(event);">'+country.country+'</a></li>';
         return listItem;
      }
 },

Here is an example of what one of the listitem looks like in the dom:

<a href="#" onclick="setCountry(" il","israel");getdistribution(event);">Israel</a>

the console log will show all the country codes in full uppercase but the codes in the dom show as lowercase as well as an extra space in front of it.

Answer 1

I had my concatenation quotes wrong.

createList: function(scope){
      var country = scope;
    var cc = country.countryCode;
    var ccc = cc.toUpperCase();
    console.log(ccc);
    if(ccc){
      var listItem = '<li><a href="#" onclick="setCountry('+ccc+','+country.country+');getDistribution(event);">'+country.country+'</a></li>';
      return listItem;
    }
    },