Execute method that is inside the event "onclick"

Navigation
2

When you answer this 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 click method which in turn was to execute the funcao_a method, 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 this is not the case when I have an object with a different name, 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?

    
asked by anonymous 21.01.2018 / 00:38

2 answers

1

Actually, the problem lies in 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 verify with the typeof operator 

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 get the click function when you make .click at 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 have the value "Carlos" .

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

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

console.log(nome);

The difference is that in this case we construct 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, not getting any reference to it, and therefore not being accessible in the rest of the code.

This is exactly the problem that 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 over the created object will only get the name: 

let nome = ({nome:"Carlos",idade: 25}).nome;
console.log(nome);
    
21.01.2018 / 01:50
1

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

Icoulduseanyname,forexampleabc:

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 can not access funcao_a() because the x.onclick object is only pointed to click (in my example, 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 it: 

x.onclick = x.onclick.click;

or 

x.onclick = x.onclick.funcao_a;

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

Inthesecondexample,theconsoleshowsallavailableinstancesintheobject:

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

    
21.01.2018 / 02:31
Search in two tables [duplicate] Conditional expression type can not be determined because there is no implicit conversion between "null" and "DateTime"