Execute method that is inside the "onclick" event

Question

In answering that question, I came across the following situation. Note that onclick in x is an object with two methods, when the element receives the click executes the method click which in turn was to execute the method funcao_a, but returns the following error:

Typeerror: x.onclick.funcao_a is not a Function at Htmlheadingelement.click

var x = document.getElementById("title");
x.onclick = {
  funcao_a: function() {
    console.log('Função A');
  },
  click: function() {
    console.log('Click');
    x.onclick.funcao_a();
  }
};

x.onclick = x.onclick.click;

<h1 id="title">Somente alguns testes em JS</h1>

But it doesn’t happen the same when I have an object with a different name, as for example: x.objeto.

var x = document.getElementById("title");
x.objeto = {
  funcao_a: function() {
    console.log('Função A');
  },
  click: function() {
    console.log('Click');
    x.objeto.funcao_a();
  }
};

x.onclick = x.objeto.click;

<h1 id="title">Somente alguns testes em JS</h1>

My question is: Is it possible to access this method as in the first example? If yes how ?

Answer 1

Actually the problem is what you assumed was x.onclick

Note that onclick in x is an object ...

The onclick in x was actually with a function, something that can prove with the operator typeof

var x = document.getElementById("title");
x.onclick = {
  funcao_a: function() {
    console.log('Função A');
  },
  click: function() {
    console.log('Click');
    x.onclick.funcao_a();
  }
}.click;

console.log(typeof x.onclick);

<h1 id="title">Somente alguns testes em JS</h1>

Because when you built the object, you only got the function click in making .click in the end.

Let’s start by considering another simple example:

let usuario = {
    nome: "Carlos",
    idade: 25
};

let nome = usuario.nome;
console.log(nome);

Here it becomes clear that the variable nome will take the value "Carlos".

But we can build an example similar to yours without storing the object in a variable:

let nome = {
    nome: "Carlos",
    idade: 25
}.nome;

console.log(nome);

The difference is that in this case we build the whole object but only get the name, which makes the rest of the information not accessible. In fact the object was instantiated and used only on that line, leaving no reference to it, and therefore not accessible in the rest of the code.

This is exactly the problem your first example has.

If you wanted to make it even clearer you could slightly format the example and add parentheses to visually reinforce that on the created object will be named only:

let nome = ({nome:"Carlos",idade: 25}).nome;
console.log(nome);

Answer 2

In the first code, the click underscore in the image below represents nothing but an object instance x.onclick:

I could use any name, for example abc:

var x = document.getElementById("title");
x.onclick = {
  funcao_a: function() {
    console.log('Função A');
  },
  abc: function() {
    console.log('Click');
    x.onclick.funcao_a();
  }
}.abc;

<h1 id="title">Somente alguns testes em JS</h1>

In the first example you cannot access funcao_a() because the object x.onclick is aimed only at click (in my case, abc) in:

}.click;

In your second example, you did not assign the object to any instance, so you can access any instance within it by calling by name:

x.onclick = x.onclick.click;

or

x.onclick = x.onclick.funcao_a;

See what the console shows inside x.onclick of the first example, only the function within click::

In the second example, the console shows all the available instances in the object:

Therefore, there is no way you can access the instance funcao_a: in the first example because it is not visible to the onclick in question.