Using addEventListener with a function in a method

Question

I have a table of nine photos, I also have nine sets of: a photo; a text; and an audio control, that are hidden to the left of the screen. I am trying to make it so that when a photo from the table is clicked that the corresponding set moves from the hidden position to the visible area of the webpage.
I asked this question and got a helpful answer about how to do this with the onclick method but as I have nine and because I have since read up that the addeventlistener results in a cleaner code and is more economical, I have been attempting to do this but with no luck. Please look at my code and tell me what I am missing, thank you in advance for your help. Ignore the onclick as once I get the addeventlistener working I will replace it. P.S. I am trying to master JavaScript.

html code(I haven't included the code for the image, text, audio because I know they are fine as they work with the onclick function:

...
<table>
   <tbody>
      <tr>
      <td><img onclick="sleepFunction(this)" src="01.jpg" height="180" width="120"></td>
      <td><img id = "02" src="02.jpg" height="180" width="120"/></td>
      <td><img id = "03" src="03.jpg" height="180" width="290"/></td>
      </tr>
      <tr>
      <td><img id = "04" src="04.jpg" height="180" width="120"/></td>
      <td><img id = "05" src="05.jpg" height="180" width="120"/></td>
      <td><img id = "06" src="06.jpg" height="180" width="290"/></td>
      </tr>
      <tr>
      <td><img id = "07" src="07.jpg" height="180" width="120"/></td>
      <td><img id = "08" src="08.jpg" height="180" width="120"/></td>
      <td><img id = "09" src="09.jpg" height="180" width="290"/></td>
      </tr>
   </tbody>
</table>    
...

Here is the JavaScript:

function slideShow (text, image, song) {
  this.text = text;
  this.image = image;
  this.song = song;
  this.xbutton = xbutton;
  this.moveLeft = function(){
    this.text.style.left = "357px";
    this.image.style.left = "851px";
    this.song.style.left = "450px";
    this.song.play();
    this.xbutton.style.left = "357px";
    }
  }

var sleep = new slideShow(document.getElementById("sleepText"),document.getElementById("sleepImage"), document.getElementById("sleepSong"), getElementById("xbutton"));

var sleepLeft = sleep.moveLeft();

document.getElementById("02").addEventListener("click", moveLeft);

pherris · Accepted Answer · 2015-10-31 18:46:33Z

1

Looks like you are close. The moveLeft function is in the SlideShow instance (you should capitalize that first letter), so you need to change your listener to:

document.getElementById("02").addEventListener("click", sleep.moveLeft);

With the capitalized object:

function SlideShow (text, image, song) {
  this.text = text;
  this.image = image;
  this.song = song;
  this.xbutton = xbutton;
  this.moveLeft = function(){
    this.text.style.left = "357px";
    this.image.style.left = "851px";
    this.song.style.left = "450px";
    this.song.play();
    this.xbutton.style.left = "357px";
    }
  }

var sleep = new SlideShow(document.getElementById("sleepText"),document.getElementById("sleepImage"), document.getElementById("sleepSong"), getElementById("xbutton"));

var sleepLeft = sleep.moveLeft();

document.getElementById("02").addEventListener("click", sleep.moveLeft);

answered Oct 31, 2015 at 18:46

pherris

17.8k8 gold badges47 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

LUIS PEREIRA Over a year ago

Also the SlideShow is expecting three parameters and we're passing 4. xbuton doesn't exist as an argument.

Obi-wan Over a year ago

Thank you pherris and Luis for your answers, I have made the changes that both of you suggested but to no avail, it still doesn't work. The only other thing I can think of is if my id for the image is wrong? @pherris

Obi-wan Over a year ago

Hello pherris, I am using Komodo 9. There is no error appearing but on the webpage when I click the corresponding image it is unresponsive, as if it were just a normal image with no links or eventlisteners attached to it.

Obi-wan Over a year ago

For some reason, the new code that I added isn't showing up here but I will just use that. Thanks for answering my question.

Collectives™ on Stack Overflow

Using addEventListener with a function in a method

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related