Question

I am trying to write a star rating system in javascript that allows the user to rerate (is that a word?). I am quite new to Javascript and programming in general, but here is what I have so far:

<div id="rateMe" title="Rate Me...">
     <a><img id="star1" onMouseOver="mOverRate(this);" onMouseOut="mOutRate(this);"
        onMouseDown="mClickRate(this);" src="star_empty.png"/></a>
     <a ><img id="star2" onMouseOver="mOverRate(this);" onMouseOut="mOutRate(this);" 
        onMouseDown="mClickRate(this);" src="star_empty.png"/></a>
     <a><img id="star3" onMouseOver="mOverRate(this);" onMouseOut="mOutRate(this);" 
        onMouseDown="mClickRate(this);" src="star_empty.png"/></a>
     <a><img id="star4" onMouseOver="mOverRate(this);" onMouseOut="mOutRate(this);" 
        onMouseDown="mClickRate(this);" src="star_empty.png"/></a>
     <a><img id="star5" onMouseOver="mOverRate(this);" onMouseOut="mOutRate(this);"
        onMouseDown="mClickRate(this);" src="star_empty.png"/></a>


     <label id="info0"></label>
     <label id="info1"></label>
     <label id="info2"></label>
     <label id="info3"></label> 
     <label id="info4"></label>
</div>



<script type="text/javascript">
        var Rated = false;

        // Declare an array that holds refers to the star img objects
        var aryImg = new Array(document.getElementById("star1"), document.getElementById("star2"), 
            document.getElementById("star3"), document.getElementById("star4"),
            document.getElementById("star5"));

        // Decare an array that will be used to store the star rating
        // when a user clicks and chooses a rating
        aryStoredImg = aryImg;




        function mOverRate(that)
        {

            var myImg = that;

            // Changes the star image to filled (and any images to the right
            // of it) if the mouse is hovering over it
            switch (myImg.id)
            {
                case "star1":
                    aryImg[0].src = "star_filled.png";
                    break;
                case "star2":
                    for (var i = 0; i <= 1; i++)
                    {
                        aryImg[i].src = "star_filled.png";
                    }
                    break;
                case "star3":
                    for (var i = 0; i <= 2; i++)
                    {
                        aryImg[i].src = "star_filled.png";
                    }
                    break;
                case "star4":
                    for (var i = 0; i <= 3; i++)
                    {
                        aryImg[i].src = "star_filled.png";
                    }
                    break;
                case "star5":
                    for (var i = 0; i <= 4; i++)
                    {
                        aryImg[i].src = "star_filled.png";
                    }
                    break;
            }

        }


        function mClickRate(that)
        {

            // This attempts to store the state of the imgs
            // after the user clicks a star
            for (var i = 0; i < aryImg.length; i++)
            {
                aryStoredImg[i].src = aryImg[i].src;
            }

            Rated = true;
        }




        function mOutRate(that)
        {
            var myImg = that;

            if (Rated)
            {
                // This replaces the images displayed with the
                // images that were stored at the time the user
                // clicked on a star
                for (var i = 0; i < aryImg.length; i++)
                {

                    aryImg[i].src = aryStoredImg[i].src;

                }
            }
            else
            {
                // This resets all of the images after the mouse
                // out event
                for (var i = 0; i < aryImg.length; i++)
                { 
                    aryImg[i].src = "star_empty.png";

                }
            }

        }

In the mClickRate() function I wanted to store the current source so that I could recall it in the mOutRate() function to restore the user’s choice if he does not click again. However, after a little research (okay a lot of research) I found out that my new array was pointing to the same reference.

I have tried using the array.splice and I have also tried using a loop without any luck. If anyone has any help to offer in copying this type of array by value instead of reference or advice on how to make my script better please let me know.

Oh, and did I said I was a beginner (Please keep that in mind when responding)? Thanks in advance.

Answer 1

I’m not sure I’m following exactly what you’re asking, but if what you want to do is to save the current user’s settings, then you should save the actual state (e.g. the number of stars), not image references used in the UI. So, when you want to save the state just look at how many stars are set and save that single number. If you want to restore that state sometime in the future, you just loop through and set the right number of images to match that number. That really ought to work much better than saving image references. Another advantage is that assigning numbers is always by copy so you don’t have to worry about references.