Challenge: Using addEventListener in addition to a current image that pops up upon hover.

Question

Hi all, I've already had developed a certain code that I learnt on programming websites for hovering an image.

But the challenge for me was to add in EventListener, as far as I know, the Event Listener means to register a listener for an event to be associated with it, but I don't see a point in doing it. But since this is a challenge, I'm stucked!

As per following is my codes that I do not know how to put inside.

function bigImg(hoveredImg) { hoveredImg.style.height = "600px"; hoveredImg.style.width = "600px"; }

function normalImg(defaultImg) { defaultImg.style.height = "300px"; defaultImg.style.width = "300px"; }

The following below shows an error though, saying Uncaught TypeError: Cannot read property 'appendChild' of null

var img = document.createElement('img'); img.src = "../test.jpg"; document.body.appendChild(img); <- I believe this is the error, how do i go around fixing it?

if (img.addEventListener) { img.addEventListener('mouseover', executing a function, false); img.addEventListener('mouseout', executing a function, false); }

I understand by calling this two functions below I can solve the question!

onmouseover="bigImg(this)" onmouseout="normalImg(this)"

Questions 1) So if the above statement is correct, am i suppose to add executing a function from addEventListener to img.addEventListener('mouseover',bigimg(img), false)? 2) Is there any way to solve the null value for appendChild?

Thanks.

Answer 1 · 2014-10-03T03:31:33Z

October 3, 2014 3:31am

Hi Techie,

1) Well, if you want to pass a parameter to your listener you need to put an anonymous function as the second parameter of addEventListener(), otherwise your function will be executed without any trigger. Here's an example to be more clear:

img.addEventListener('mouseover' , function() { bigimg(img) });

I suggest you to take a look at the documentation for more details, always helps a lot!

2) Probably the body is not loaded yet when you execute it. You have two options:

Put your script on the footer of the document, right before the close of the html tag.

  <!-- All your HTML... -->
  <script src="your-script-file.js"></script>
</html>

Make sure the document is already load. You can do it wrapping your code inside the window onload event.

window.onload = function() {
  var img = document.createElement('img'); 
  img.src = "../test.jpg"; 
  document.body.appendChild(img); 
}

Give me a touch if I was not clear enough!

Welcome to the Treehouse Community

Looking to learn something new?

Techie Beginner

Techie Beginner

Challenge: Using addEventListener in addition to a current image that pops up upon hover.

1 Answer

Gabriel Tartaglia

Gabriel Tartaglia