2017-08-26 43 views
0

我在页面上有两个非常简单的Javascript,然后当我回到网站时,他们突然没有响应。它们什么都不做,并且在浏览器控制台中不显示任何错误。它非常混乱。所有Javascript突然停止工作

<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,我看到“失踪分号”的错误,但它没有错误昨天的工作,所以这不会使一个很大的意义对我来说。

任何援助,你可以提供将不胜感激。

+0

您是否更改了两个独立日之间的任何代码?你有没有尝试在另一个浏览器中测试它? – bdkopen

+1

这两天我没有在代码上工作,而且它在Chrome和Firefox之间表现相同。挡板,对吧? – user2912466

回答

0

“autoSave”函数中的this.checked对我而言返回“undefined”。我修改了代码以将复选框元素引用传递给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> 
-1

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

0

试试这个办法(一套处理程序通过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>

或者,你可以看看jQuery库,它提供了强大的工具来完成像你这样的任务,而你不知道不必担心跨浏览器的问题。