Javascript funktioniert plötzlich nicht mehr

Question

Ich hatte zwei sehr einfache Javascripts auf einer Seite, und als ich dann auf die Seite zurückkam, reagierten sie plötzlich nicht mehr. Sie tun nichts, und in der Browserkonsole werden keine Fehler angezeigt. Es ist sehr verwirrend.

<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 meinem IDE, ich „fehlt Semikolon“ Fehler sehe, aber es war gestern ohne Fehler arbeiten, so dass dies nicht viel Sinn für mich.

Jede Hilfe, die Sie anbieten könnten, würde geschätzt werden.

Answer 1

Die this.checked in "AutoSave" -Funktion zurückgegeben "undefined" für mich. Ich habe den Code so geändert, dass er den Checkbox-Elementverweis an die AutoSave-Funktion übergibt.

  <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

Sie benötigen das Semikolon nicht in einem HTML-Tag. Ich weiß nicht, ob das das Problem ist, aber es ist eine mögliche Lösung.

Answer 3

Versuchen Sie diesen Ansatz (Set-Handler durch 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>

Alternativ Sie einen Blick auf jQuery Bibliothek nehmen könnte, die große Werkzeuge bietet Aufgaben wie das Ihre zu tun und Sie don‘ Ich muss mir so viele Gedanken über Cross-Browser machen.