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. PS 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);

Answer 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);