why is my function “donethingy” considered “not declared”?

Question

i have a question, there is a problem with a function in a program that i was doing in javascript.

The function is supposed to work when you click on a paragraph, but when i click, the javascript console throws this: "Uncaught ReferenceError: donethingy is not defined Line: 1".

JS:

window.onload = function(){
  var thy = document.getElementById("thy");
  var commanderIssue = document.getElementById("commanderIssue");
  var listado = document.getElementById("thaCosa");
  var thyLy = document.getElementsByTagName("p");
  var nli;
  var thyText;
  var inserting = "a";
  var commander = "b";
  thy.onclick = function(){
    inserting = "* " + prompt("Create a new item");
    nli = document.createElement("p");
    thyText = document.createTextNode(inserting);
    nli.appendChild(thyText);
    listado.appendChild(nli);
    thyLy = document.getElementsByTagName("p");
  }
  thyLy.onclick = function donethingy(){
    // thyLy.textDecoration.overline;
    alert("done");
  }
  commanderIssue.onclick = function(){
    alert("this thing is");
  }
}

Answer 1

With the syntax you've used, the name donethingy doesn't actually become the name of the function because you are assigning the funciton's code directly to the onclick property of thyLy .

You could do this:

// This is a function declaration that associates a name with the function
function donethingy(){
    // thyLy.textDecoration.overline;
    alert("done");
}

// Then the function can be referred to or invoked by name
thyLy.onclick = donethingy;

But, when you create and assign the function in one statement, the function effectively becomes anonymous as it is stored and accessible via the property you assigned it to.

The decision to create a function declaration or an anonymous function requires you taking the following into account:

• Anonymous functions can't easily be reused.
• Anonymous functions can't easily be unit tested.
• Named functions may require more memory, but can be reused and can be easily unit tested.

Answer 2

You do not set variables or onclick properties to functions defined as:

obj.onclick = function <name>() {}

You set to anonymous functions, like you did for commanderIssue.onclick .

Just remove the name of the function to make it anonymous:

thyLy.onclick = function() {
    alert("done");
}

Answer 3

It's good to remember that there are two ways of defining functions:

1. Declarations , which are executed when you invoke them:

   function donethingy() { ... }

2. Expressions , which are executed when variable statements are executed:

   thyLy.onclick = function() { ... }