Kann nicht einfach focus() Funktion arbeiten

Question

Haben Sie einen einfachen Kontakt Link in der Navigationsleiste, die auf einen Klick hört, löst eine Funktion, die Fokus() auf die Formulareingabe mit der ID 'Hallo'. Erhalten Sie den Fehler:

Uncaught TypeError: Cannot read property 'addEventListener' of null 
    at practice1.js:18 

<nav> 
    <ul> 
     <li><a href="#home"><span class="active">Home</span></a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#media">Media</a></li> 
     <li><a href="#contact" id="hello">Contact</a></li> 
    </ul> 
</nav> 

<form> 
    Full name:<br> 
    <input type="text" name="fullname" id="fullName"><br> 
    Message:<br> 
    <textarea type="text" name="message" id="sidebar-message"></textarea><br> 
    <button type="submit" name="message-submit" class="submit-button" href="#">Submit</button> 
</form> 

function contactFocus() { 
    $('#fullName').focus(); 
} 

var contactLink = document.getElementById('hello'); 
contactLink.addEventListener('click', contactFocus, false); 

Answer 1

Dies könnte ein Timing Problem sein: die Linie läuft, bevor die Seite vollständig ausführt.

Versuchen Sie diese, in einem jQuery-y Idiom:

$(() => { 
    $("#hello").click(contactFocus); 
}); 

Edit:
Genauer gesagt, das zugrunde liegende Problem ist, dass das Javascript ausgeführt wird, bevor die Seite vollständig gerendert wird, so dass die Item mit der ID "Hallo" existiert noch nicht.

Meine Änderungen sind

• ich für die Funktion nur ausgeführt werden geordnet, sobald jQuery bereit ist; das ist die Bedeutung des Ausdrucks $(fcn). Meiner Meinung nach ist dies der Verwendung von $(document).ready() überlegen - das bereitstehende Dokument ist kein allgemein verstandenes Konzept. Der Punkt ist, dass jQuery ("$") bereit ist.
• Ich verwendete $("#hello") anstelle von document.getElementById('hello'), sie sind in etwa gleichwertig, aber der ehemalige ist der jQuery Weg, es zu tun.
• Aus dem gleichen Grund, habe ich .click(f) statt .addEventListener('click',f)

Answer 2

Versuchen Sie jQuery in einer $(document).ready() Wie so Verpackung:

$(document).ready(function(){ 
    $('#fullName').focus(); 
}); 

, bevor es diese wartet auf die Seite und CSS zu beenden Laden Führt das Skript aus.