I'm having trouble setting an image using JavaScript

Question

I'm trying to make a ratings system but I'm at a stand with the javascript. I have made a method which is suppose to swap out the image of a blank star for a star.

function setStar(intStarId) {
var stars = new Array("star_one","star_two","star_three","star_four","star_five");
for (var i = 0; i < intStarId; i++)
    document.getElementById(stars[i]).src = "images/star.png";
}

When I call this method it does not do anything with the star. How could I get this working so it swaps the blank star image for the star image?

Here is how I'm calling it in html. (it's actually php but it's echoing html)

echo "<script language='javascript'>setStar(3)</script>";

And here is the html for the stars (php echoing html)

echo "<ul name='a' style='list-style: none; margin: 0px; float: right;'>
                <li name='b' align='center'>
                    <form name = 'test' action='#' method='post'>
                        <a href='#'><img name='star_one' src='images/star_blank.png' onmouseover='hoverInStar(1)' onmouseout='hoverOutStar(1)'/></a>
                        <a href='#'><img name='star_two' src='images/star_blank.png' onmouseover='hoverInStar(2)' onmouseout='hoverOutStar(2)'/></a>
                        <a href='#'><img name='star_three' src='images/star_blank.png' onmouseover='hoverInStar(3)' onmouseout='hoverOutStar(3)'/></a>
                        <a href='#'><img name='star_four' src='images/star_blank.png' onmouseover='hoverInStar(4)' onmouseout='hoverOutStar(4)'/></a>
                        <a href='#'><img name='star_five' src='images/star_blank.png' onmouseover='hoverInStar(5)' onmouseout='hoverOutStar(5)'/></a>
                    </form>
                </li>
            </ul>";

Ramesh · Accepted Answer · 2011-04-01 13:47:39Z

2

You are trying to find the element in DOM by using the id. But your HTML output contains only name. Try modifying you code to below

echo "<ul name='a' style='list-style: none; margin: 0px; float: right;'>
                <li name='b' align='center'>
                    <form name = 'test' action='#' method='post'>
                        <a href='#'><img id='star_one' src='images/star_blank.png' onmouseover='hoverInStar(1)' onmouseout='hoverOutStar(1)'/></a>
                        <a href='#'><img id='star_two' src='images/star_blank.png' onmouseover='hoverInStar(2)' onmouseout='hoverOutStar(2)'/></a>
                        <a href='#'><img id='star_three' src='images/star_blank.png' onmouseover='hoverInStar(3)' onmouseout='hoverOutStar(3)'/></a>
                        <a href='#'><img id='star_four' src='images/star_blank.png' onmouseover='hoverInStar(4)' onmouseout='hoverOutStar(4)'/></a>
                        <a href='#'><img id='star_five' src='images/star_blank.png' onmouseover='hoverInStar(5)' onmouseout='hoverOutStar(5)'/></a>
                    </form>
                </li>
            </ul>";

Please also note, id should be unique for all the elements in the DOM.

answered Apr 1, 2011 at 13:47

Ramesh

13.3k4 gold badges55 silver badges90 bronze badges

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

1 Comment

Dennis Over a year ago

I didn't even notice. Thank you!

Francesco Terenzani · Accepted Answer · 2011-04-01 13:45:54Z

1

I think you should use getElement*sByName* instead getElement*ById* ;-) Pay attention, because getElementsByName doesn't return an element, but a node list:

function setStar(intStarId) {
    var stars = new Array("star_one","star_two","star_three","star_four","star_five");
    for (var i = 0; i < intStarId; i++) {
        document.getElementsByName(stars[i])[0].src = "images/star.png";

    }
}

answered Apr 1, 2011 at 13:45

Francesco Terenzani

1,3917 silver badges14 bronze badges

1 Comment

Francesco Terenzani Over a year ago

or instead replace name with id in you markup as posed by Ramesh :-)

Timon. Z · Accepted Answer · 2011-04-01 13:56:48Z

1

You should just use jQuery, with the following Library, it would have been easier :)

Have a look at http://www.jquery.com/ and http://plugins.learningjquery.com/half-star-rating/

edited Apr 1, 2011 at 13:56

answered Apr 1, 2011 at 13:48

Timon. Z

6813 silver badges10 bronze badges

Collectives™ on Stack Overflow

I'm having trouble setting an image using JavaScript

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related