2017-08-26 78 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庫,它提供了強大的工具來完成像你這樣的任務,而你不知道不必擔心跨瀏覽器的問題。