Adding custom JS function to custom component problem

I'm working on creating a custom Design Studio component and for some reason when I try to call my custom JS function I get a JavaScript error stating that the function is not defined. However as you can see the function is clearly defined.

What am I doing wrong?

Do I need to decordate the function to change it's visibility and add it to the contrubution.ztl and contrubution.xml files?

Here is my code:

     this.init = function()      {          // Padding div.          this.paddingDiv = document.createElement("DIV");                    this.masterUL = document.createElement("UL");                    $(this.paddingDiv).css({               padding:"10px"          });                    var htmlText = "";          controlID = this.$().attr("id");          var myID = controlID + "_value";          for (var i = 0; i < 5; i++){               htmlText = htmlText + "<li class=\"" + this._nodeCollapsedCss  + "\"><input type=\"checkbox\" id=\"check" + i + "\" name=\"check" + i + "\" value=\"MyValue_" + i + "\" data-hiddenValue=\"" + myID + "\" onclick=\"changeValue('check" + i + "')\"><label for=\"check" + i + "\">List Item "+ i +"</label></li>";          }                    $(this.masterUL).html(htmlText);                    $(this.paddingDiv).appendTo(this.$());                    $(this.masterUL).appendTo(this.paddingDiv);          $(this.paddingDiv).append("<input type=\"hidden\" name=\"" + myID + "\" id=\"" + myID +"\"/>");                    // Click handler.          this.$().click(function() {               that.fireEvent("onclick");          });          // Layout.          this.$().css({               lineHeight: "normal", // Fix for SAPUI5 lineheight=0.               borderStyle:"solid",               borderWidth:"1px",               borderColor:"lightgray",               backgroundColor:"white"          });                    $(controlID).find("input").each(function() {              alert("you click one of the listed checkbox?");          });               );     function changeValue (newValueID)     {          alert(newValueID);          var tempVal = $(newValueID).val();          var isAdd = $(newValueID).prop("checked");          var masterListID = $(newValueID).data("hiddenValue");          if (isAdd)          {               $(masterListID).val(("," + tempVal +",","") + $(masterListID).val());          }          else          {               $(masterListID).val(tempVal.replace("," + $(newValueID).val() +",",""));          }     }

Thanks for your help with this,

Pete