JavaScript Function Name Cannot Set as Click

Why can't I set a JavaScript function's name property?

Because name is a non-standard, non-writable property of function objects. Function declarations and named function expressions are named, while you have an anonymous function expression whose name is "".

You probably wanted a plain object:

var person = {
    name: "John Smith",
    age: 21,
    profession: "Web Developer"
};

JavaScript function is displaying function name as undefined when button is clicked

Purpose of $(document).ready()

$(document).ready(function() { /* handling code for the event document.ready */ })

First of all you need to understand the purpose of this document.ready handler. When your page loads, your javascripts cannot be certain as of what parts of the DOM are already available. document.ready triggers when the DOM is complete so you can start selecting elements either using jQuery or document.getElementById or document.querySelector.

Making stuff globally available

If you want to define functions that are globally available you do not do this inside another function, but if you insist, you need to explicitly attach the function to the global object (which, in a browser, is the window object):

$(document).ready(function() {
  window.changeTitle = function changeTitle() {
    var title = document.querySelector(".head-title");
    title.innerHTML += "<br>(or how to speak like a pirate)";
  };
});

The better way to do this would be to define the function outside the handler:

function changeTitle() {
  var title = document.querySelector(".head-title");
  title.innerHTML += "<br>(or how to speak like a pirate)";
};

which implicitly attaches it to the global object and makes it accessible from anywhere by just calling it using changeTitle().

Adding the function to handle button clicks - the proper way

To give you a sense of how you do attach event handlers to elements, here comes the document.ready handler back into play:

$(document).ready(function() {
  document.querySelectorAll('nav button').forEach(function(button) {
    button.addEventListener('click', changeTitle);
  })
});

If you're already using jQuery, this can be simplified to

$(document).ready(function() {
  $('nav button').on('click', changeTitle);
});

Chaining makes code shorter

var title = document.querySelector(".head-title");
title.innerHTML += "<br>(or how to speak like a pirate)";

can be shortened to

document.querySelector(".head-title").innerHTML += "<br>(or how to speak like a pirate)";

Can an onclick() function not have the same name as the element calling it?

Inline event handlers are magical (i.e. not intuitive).

The properties of the enclosing <form> element are in scope of the inline event handlers. And since the name of each form control element becomes a property of the form element, using such a name inside the event handler will refer to the element instead.

The scope chain of the inline event handler is roughly:

Global scope / properties of window
^
|
Properties of document (e.g. body)
^
|
Properties of enclosing form (e.g. newTreatment or submit)
^
|
Properties of <button id="newTreatment" /> (e.g. type, onclick)
^
|
Function scope of inline event handler

Bindings in closer scopes (e.g. the form) shadow bindings in higher scopes, e.g. the global scope.

A simple solution would be explicitly refer to the global variable via window.newTreatment.

I described this in more detail here.

This seems to be formalized in the HTML5 spec.

---

Related Topics