所有Javascript突然停止工作

Question

I had two very simple Javascripts on a page, and then when I came back to the site, they are suddenly unresponsive. They do nothing, and no errors show up in the browser console. Its very confusing.

<div id="menuBtn">
<img src="img/gear.png" onmouseover="showMenu();" onmouseout="hideMenu();" height=30px width=30px>
    <script type="text/javascript">
        function hideMenu() {
            document.getElementById("myMenu").style.visibility = "hidden"; 
        }

        function showMenu() {
            document.getElementById("myMenu").style.visibility = "visible"; 
        }
    </script>
</div>

<input type="checkbox" id="autosave" width=25px onChange="autoSave();">
<img src="img/autosave_disabled.gif" height=25 id="autoimg">
<font id="autosave_label" color="grey">Enable Auto-save</font>
<script type="text/javascript">
    function autoSave() {
        if(this.checked) {
            document.getElementById("autoimg").src = "img/autosave.gif";
            document.getElementById("autosave_label").style.color = 'black';
        } else {
            document.getElementById("autoimg").src = "img/autosave_disabled.gif";
            document.getElementById("autosave_label").style.color = 'grey';
        }
   }
</script>

In my IDE, I am seeing "missing semicolon" errors, but it was working yesterday with no errors, so this doesn't make a lot of sense to me.

Any assistance you could offer would be appreciated.

Answer 1

The this.checked in "autoSave" function returned "undefined" for me. I have modified the code to pass the checkbox element reference to the autoSave function.

            <input type="checkbox" id="autosave" width=25px onchange="autoSave(this)">
            <img src="img/autosave_disabled.gif" height=25 id="autoimg">
            <font id="autosave_label" color="grey">Enable Auto-save</font>
            <script type="text/javascript">
                function autoSave(element) {
                    if(element.checked) {
                        document.getElementById("autoimg").src = "img/autosave.gif";
                        document.getElementById("autosave_label").style.color = 'black';
                    } else {
                        document.getElementById("autoimg").src = "img/autosave_disabled.gif";
                        document.getElementById("autosave_label").style.color = 'grey';
                    }
                }
            </script>

Answer 2

Try this approach (set handlers through addEventListener ):

 var img = document.getElementById("image"), input = document.getElementById("autosave"); img.addEventListener('mouseover', showMenu, false); img.addEventListener('mouseout', hideMenu, false); input.addEventListener('change', autoSave, false); function hideMenu() { console.log('hideMenu'); } function showMenu() { console.log('showMenu'); } function autoSave() { if(this.checked) { console.log('actions if checked'); } else { console.log('actions if not checked'); } } 

 <div id="menuBtn"> <img id="image" src="http://www.dailyworldfacts.com/wp-content/uploads/2011/06/facts-about-cat-fallen-cat.jpg" height="70px" width="70px"> </div> <input type="checkbox" id="autosave" width=25px > <img src="img/autosave_disabled.gif" height=25 id="autoimg"> <font id="autosave_label" color="grey">Enable Auto-save</font> 

Alternatively, you could take a look at jQuery library that offers great tools to accomplish tasks like yours and you don't have to worry that much about cross-browserness.

Answer 3

You don't need the semicolon in an html tag. I don't know if thats the problem, but its a possible solution.