Script works partially in Chrome and IE but not in Firefox

The following code works somewhat in chrome and IE but not in Firefox.

The idea is to force users to check an "Agree" box before advancing by following either one of the possible links available.

 <script type="text/javascript"> 
        function agreeCheck() 
        {

        valid = false;

        var agree = document.getElementById('agree');
            if(isAgree(agree)){
            valid= true;
            }

        return valid;
        } 

        function isAgree(elem)
        {
            if ( elem.checked == false )
                {
            Show_Stuff(agreespan, "true");
                return false;
            }
            else
            {
            Show_Stuff(agreespan, "false");
            return true;
            }
        }
        function Show_Stuff(warning,on_off)
        // Function that will swap the display/no display for
        // all content within开发者_如何学Go span tags
        {

        if ((warning.style.display == "none")&&(on_off =="true"))
            {
            warning.style.display = "";
            }
        else
            {
            warning.style.display = "none";
            }


        }
</script>

    <input type="checkbox" name="agree" value="signed" id="agree">
I agree</input> <span ID="agreespan" style="display: none">
<font color="red">You must agree in order to proceed</font> 
                                    </span> 

 <button type="button" title="Proceedt" class="btn-proceed" onclick="if (agreeCheck()==true){ window.location='myURL'; } else{ return agreeCheck();}"></button>

<input type="image" src="anotherURL" title="myTitle"  onClick="return agreeCheck();"/>

Notes:

1. obviously myURL and anotherURL are actual valid URLs
2. clicking on the first button when the box is not checked prevents the page from progressing but does not reveal the error message in the span in Chrome and IE. In Firefox it does nothing regardless of the box status
3. clicking the image link (input type="image") when the box is not checked works well in Chrome and IE and the error message appears. In Firefox the link is followed regardless of the box's status.
4. I realize that this could be written differently to simplify things. The problem is that I am implementing this in Magento where I only have access to chunks of code separately so I can't combine the parts of the If Else statement in a separate function.

**edit: I changed the if statement (one line before last) to

if (agree.checked ==true){ ...

this fixed the issue in chrome and IE and now those browsers are behaving properly. Firefox is still not doing what I want it to do

The problem is in isAgree function. Try the following:

function isAgree(elem)
{
        if (!elem.checked == "Checked")
        {
            Show_Stuff(agreespan, "true");
            return false;
        }
        else
        {
            Show_Stuff(agreespan, "false");
            return true;
        }
}

Hope it solves the issue. The solution resolves around this "checked" property.

span_tag.style.display is used for layout purposes not to hide or show the span tag
It doesn't work in your case because the JavaScript is probably breaking.
Try changing everything to use the following code

warning.style.visibility = "hidden";
warning.style.visibility = "visible";