Help with simple event listener

https://codepen.io/TuscannyCodes/pen/jOyNbEb

Im working on a practice page were the user can click a div and the text will change to display new text. The best way I could thing of doing this is by swapping the text off the page and switching in the new text onto the page via a click event.

Im having a problem with this, I believe because im getting the syntax of the function wrong… Can someone help me out here? What am I doing wrong? how can I create a click event that changes the ‘top’ value of of my divs allowing me to click and change the text on the page?

You can edit the displayed text by updating the textContent property (Node.textContent - Web APIs | MDN).

Here’s an example: https://codepen.io/colinthornton/pen/gOgYajO

1 Like

Thanks. I will try this. However, I do prefer to manipulate this using a listener event that changes the style.top value on click. Any idea how to do this?

Ok I fixed it. I just had to play around with the syntax of the listener.

I prefer to do it this way (by manipulating the ‘top’ value) because I feel that it will be easier to create text and have them floating out of view, then just swap them out when I need them rather than changing any of the existing text.

https://codepen.io/TuscannyCodes/pen/jOyNbEb