Confused about EventListeners

Question

I'm recently learning JavaScript and don't understand some things yet. In this example, I want a button with two event listeners, but not executed at the same time. That's it:

The web page has two elements: One paragraph(<p>) and one button. This button should remove the <p> element and restore it too on alternating clicks.

1.- Add an event listener to the button (remove).
    |--- Remove the <p> element.
    |--- Remove the <p> element
    |--- Remove the listener and add a new event listener (restore).

2.- With the new event listener (restore), the button restore the <p> element.
    |--- Remove the event listener (restore)
    |--- Add a new event listener (remove);

3.- Back to 1.

I can assign the event listener to the button, but I can't remove it. Once the button has the remove event, this event is never removed and the new event is never added. Why does this happen? If I'm wrong, please tell me better code practices.

Here is the code in jsfiddle: http://goo.gl/4CX55g

Thank you very much.

Appears there is no JSFiddle link? – Brian Bolli Aug 11 '14 at 23:52 — Brian Bolli, Aug 11 '14 at 23:52

score 3 · Accepted Answer · edited May 23 '17 at 12:11

3

The following lines do not do what you expect them to do:

boton.removeEventListener('click', this.remover, false);
boton.addEventListener('click', this.restaurar, false);
boton.removeEventListener('click', this.restaurar, false);
boton.AddEventListener('click', this.remover, false);

The this variable here does not point to the Pagina object in which the function is defined. It points to the object calling the remover or restaurar function. You can check this by adding an alert(this); call. The object in this example is the HTML button element.

You can fix this by creating a new variable: that = this; below the assignment of boton. Then, use that instead of this in the methods.

Also, you had a typo: AddEventListener should be addEventListener.

Check this fixed JSFiddle. Also, this SO question offers a lot of great information about this.

edited May 23 '17 at 12:11

Community

1
1

answered Aug 11 '14 at 23:59

Rengers

13,246
1
32
49

Thank you very much bro. I have to learn about 'this' in JS. It's not the same as other languages like Java or PHP ;) Tyvm again (Y) – Gugasoft Aug 12 '14 at 00:03
can you tell me if the structure of my code is correct? What way should be better? – Gugasoft Aug 12 '14 at 00:05
The `if (isReady) {` call is not going to do anything, since `isReady` will always resolve to true. Apart from that, I highly suggest coding in English. It will be easier to read for others and it's basically standard practice. – Rengers Aug 12 '14 at 00:08

score 0 · Answer 2 · answered Aug 12 '14 at 00:03

0

The issue is with your function scope. You need to set a reference to this outside of each function call.

This works for me: http://jsfiddle.net/n22c162t/2/

answered Aug 12 '14 at 00:03

Karmacon

2,670
1
13
19

score 0 · Answer 3 · answered Aug 12 '14 at 00:07

but if hiding and showing a paragraph is all you want to do, you're going the long way around...

<script>
    document.getElementById("btn-remover").onclick=function(){
    var el = document.getElementById("publicacion-texto");
    if(el.style.display=="none"){
    el.style.display="block";
    this.innerHTML="Haz click aquí para remover el texto";
    } else {
    el.style.display="none";
    this.innerHTML="Haz click aquí para restaurar el texto";
        }
    }
</script>

Confused about EventListeners

3 Answers3