Question

我在页面上有两个非常简单的Javascripts，然后当我回到网站时，他们突然没有反应。它们什么都不做，浏览器控制台中没有出现任何错误。它非常令人困惑。

<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>

在我的IDE中，我看到＆＃34;缺少分号＆＃34;错误，但它昨天没有错误，所以这对我来说没有多大意义。

您可以提供任何帮助。

Answer 1

“autoSave”函数中的this.checked为我返回“undefined”。我修改了代码以将checkbox元素引用传递给autoSave函数。

            <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

尝试这种方法（通过addEventListener设置处理程序）：

＆＃13;

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');
   }
}

＆＃13;

<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>

＆＃13;

或者，您可以查看jQuery库，它提供了很好的工具来完成像您这样的任务，而且您不必担心跨浏览器的问题。

Answer 3

您不需要html标记中的分号。我不知道这是不是问题，但它是一个可能的解决方案。

所有Javascript突然停止工作

3 个答案: