I can't get the light stars function to work. I'm including the directions first followed by my javascript code. Can someone take a look at this and tell me where I'm going wrong???

Event Listeners

Create the init() function. The purpose of the function is to define the event listeners used in the page. Add the following commands to the function:

First, insert an event handler that runs the init() function when the page is loaded by the browser.

1. Declare the stars variable that stores an object collection of the reviewing stars, referenced by the span#stars img selector.

2. Loop through the star collection and for each star image in the collection change the cursor style to pointer and add an event listener to run the lightStars() function in response to the mouseenter event occurring over each star image.

3. After the for loop, add an event listener to the comment text area box that runs the updateCount() function in response to the keyup event.

4. Create the lightStars() function. The purpose of this function is to color a star when the user moves the mouse pointer over a star image in order to reflect the users rating of the book. Add the following commands to the function:

5. Daniel has stored the rating value of each star image in the img elements alt attribute. Store the value of the altattribute of the target of the event object in the starNumbervariable.

6. Declare the stars variable containing the object collection referenced by the selector span#stars img.

7. Loop through the stars collection with an index ranging from 0 up to less than the value of the starNumber variable. Light every star in the collection by changing the srcattribute of the star image to the bw_star2.png image file.

8. After the for loop, create another loop that loops through the stars collection with the index ranging from the value of the starNumber variable to less than 5. Unlight every star in this collection by changing the src attribute of the star image to the bw_star.png image file.

9. Change the value of the input box with the id attribute rating to starNumber stars, where starNumber is the value of the starNumber variable.

10. When the mouse pointer moves off a star image, the lit stars should be unlit. Add an event listener to the target of the event object that runs the turnOffStars() function in response to the mouseleave event.

11. If the user clicks the star image, the selected rating should be set, which means moving the mouse pointer off the star should not remove the rating. Add an event listener for the target of the event object that runs an anonymous function removing the turnOffStars() function from the mouseleave event.

MY CODE:

window.onload = init;

function init() { var stars = document.querySelectorAll("span#stars img")

for(var i = 0; i < stars.length; i++) { stars[i].style.cursor = "pointer"; stars[i].addEventListener("mouseenter", lightStars); document.getElementById("comment").addEventListener("keyup", updateCount); }

}

function lightStars(e) {

var starNumber = e.target.alt; var stars = document.querySelectorAll("span#stars img")

for(var i = 0; i < starNumber; i++) { document.images("stars").src = "bw_star2.png"; } for(var i = starNumber; i < 5; i++) { document.images(stars).src = "bw_star.png"; }

}