Uncaught TypeError: $(...).myfunction is not a function

Uncaught TypeError: $(...).myfunction is not a function

When looking in the Chrome Developer Tools I get the error: "Uncaught TypeError: $(...).myfunction is not a function".

So what's wrong with the function?

It will take some data from localStorage, but it needs to be there in the first place, and is added with the save button. The first time I run the page there might not be anything saved in localStorage. Do I then first need to run a check to see if anything is there? Or will it work anyway?

Also, does the function need to be assigned to some element ID or Class? Or could I just go with "myfunction();"? I'm trying to populate the drop down list with values from the localStorage, and the drop down list isn't within any div or something. It's added right within the form1.

  1. $(document).ready(function () {

  3.             $("#form1").myfunction();

  5.             $.fn.myfunction = function () {
  6.                 var retrievedObject = JSON.parse(localStorage.getItem("startUpSettings"));
  7.                 $(this).find("#ddlList1 option").eq(retrievedObject[0][0]).prop('selected', true);
  8.                 $(this).find("#ddlList2 option").eq(retrievedObject[0][1]).prop('selected', true);
  9.                 return this;
  10.             };

  12.             $('#ButtonSave').click(function (e) {
  13.                 e.preventDefault();

  15.                 var initialSettings = [];
  16.                 var ddlList1 = $("form1").find("#ddlList1 option:selected").index();
  17.                 var ddlList2 = $("form1").find("#ddlList2 option:selected").index();

  19.                 initialSettings[0]= [ddlList1, ddlList2];
  20.                 localStorage.setItem("startUpSettings", JSON.stringify(initialSettings));

  22.                 alert("Saved");
  23.             });                 
  24.         }); // Document Ready