Fehler beim Hinzufügen von Ereignis-Listener

Question

Zunächst einmal weiß ich, dass diese Art von Fragen tausend Mal gestellt wurden, aber warum funktioniert das nicht? Ich habe eine Chrome-Erweiterung mit einem options.html und eine Taste speichert für Dinge auf einem lokalen Speicher zu speichern:

<div>  
    <button type="button" name="save" class="btn btn-primary btn-md active" id="save">SAVE</button>   
</div>  

Und das ist mein options.js:

document.getElementById('save').addEventListener('click', 
save_options); 

aber es gibt mir diese Fehler in Chromkonsole:

Uncaught TypeError: Cannot read property 'addEventListener' of null 

Was bin ich mit Blick auf?

Answer 1

Sie versuchen, den Ereignis-Listener zu einem noch nicht erstellten Element hinzuzufügen. Fügen Sie den Ereignis-Istener zu DOMContentLoaded hinzu, um Ihren Listener auszuführen, nachdem das DOM generiert wurde.

document.addEventListener("DOMContentLoaded", function() { 
    document.getElementById('save').addEventListener('click', 
    save_options); 
}); 

sollte dies die Arbeit tun.

Answer 2

Sie diesen Fehler erhalten, weil Sie versuchen, ein Ereignis-Listener zu einem Element hinzufügen, die noch nicht erstellt wurde, setzen Sie Ihre js Skript am Ende des Körpers, oder verwenden Sie das DOMContentLoaded Ereignis,