Question

So I have this code, which is the output of a php file (hence some stuff like 3 ratings, etc).

It works flawlessly in Firefox, but Chrome and IE act like the observers don’t even exist.

Also, the onmouseout function of #ratingwrapper is considered “not defined” in chrome and ie. It’s mind boggling why these two browsers are totally ignoring the JS, yet firefox sees everything.

I tried absolutely everything, even calling simple alerts, nothing works in ie and chrome. I tried removing the observers and doing everything in the #ratingwrapper div, but all functions are being “undefined” in chrome.

I’m using prototype, header js declarations are all in order, because other scripts using prototype are working on the page. There are no conflicts, etc. I’m stuck with this unexplainable bug.

<div class="ratings">
        <div class="rating-box" id="ratingbox">
            <div class="rating" id="ratingboxfill" style="width:100%"></div>
        </div>
    <div id="ratingwrapper" onmouseout="revertProductRating()"></div>
    <br /><br />
    <div id="curpos"></div>
    <div id="cpos"></div>
    <span class="amount">3 ratings</span>
    <input id="newRating" type="hidden" value="0" />
</div>

<script type="text/javascript">
    function setNewProductRating(e) {
        var ratingx = Event.pointerX(e);
        var ratingy = Event.pointerY(e);
        var containerLeft = Position.page($('ratingbox'))[0];
        var containerTop = Position.page($('ratingbox'))[1];
        var hpos = ratingx - containerLeft;
        var vpos = ratingy - containerTop;
        $("cpos").update(hpos+","+vpos);
        if (hpos <= 9) {
            revertProductRating(10)
            $("newRating").value=1;
        } else if(hpos <19) {
            revertProductRating(20)
            $("newRating").value=2;
        } else if(hpos <28) {
            revertProductRating(30)
            $("newRating").value=3;
        } else if(hpos <38) {
            revertProductRating(40)
            $("newRating").value=4;
        } else if (hpos < 47) {
            revertProductRating(50)
            $("newRating").value=5;
        } else if (hpos < 57) {
            revertProductRating(60)
            $("newRating").value=6;
        } else if (hpos < 66) {
            revertProductRating(70)
            $("newRating").value=7;
        } else if (hpos < 76) {
            revertProductRating(80)
            $("newRating").value=8;
        } else if (hpos < 85) {
            revertProductRating(90)
            $("newRating").value=9;
        } else if (hpos < 96) {
            revertProductRating(100)
            $("newRating").value=10;
        } else {
            revertProductRating()
        }
    }

    function revertProductRating(force=0) {
        if (force == 0) {
            //document.getElementById("ratingboxfill").style.width = "100%";
            $("curpos").update("force=0");
            $("ratingboxfill").setStyle({
                width: '100%'
            });
        } else {
            //document.getElementById("ratingboxfill").style.width = force+"%";
            $("curpos").update("force="+force);
            $("ratingboxfill").setStyle({
                width: force+'%'
            });
        }
    }

    function sendProductRating()
    {
        value = $("newRating").getValue();
                window.location = 'http://x.dev/y/' + 'ratingValue/' + value;
    }

    $('ratingwrapper').observe('mousemove', setNewProductRating);
    $('ratingwrapper').observe('click', sendProductRating);
</script>

Answer 1

You can’t define default argument values in javascript, so the function definition of revertProductRating is wrong.

Try changing it to this:

function revertProductRating(force) {
    if(arguments.length === 0) {
        force = 0;
    }

    if (force == 0) {
        //document.getElementById("ratingboxfill").style.width = "100%";
        $("curpos").update("force=0");
        $("ratingboxfill").setStyle({
            width: '100%'
        });
    } else {
        //document.getElementById("ratingboxfill").style.width = force+"%";
        $("curpos").update("force="+force);
        $("ratingboxfill").setStyle({
            width: force+'%'
        });
    }
}