単純なfocus（）関数の働きを得ることができません

Question

クリックを聞いているナビゲーションバーの簡単な連絡先リンクを使用すると、フォーム入力のid 'hello'でfocus（）関数がトリガされます。エラーを取得：ページが完全に実行される前に、行が実行されます。

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

これはタイミング問題がある可能性があります。

よりjQueryの-yのイディオムでは、これを試してみてください：

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

を編集：
より詳細には、根本的な問題は、ページが完全にレンダリングされた前のJavascriptが実行されるということですので、 idが "hello"のアイテムはまだ存在しません。

私の変化は、私はjQueryの準備ができているだけで1回実行する機能のために配置された

• です。それは$(fcn)式の意味です。私の意見では、これは$(document).ready()を使用するよりも優れています。準備中のドキュメントは、広く理解されている概念ではありません。要点は、jQuery（ "$"）です。
• document.getElementById('hello')の代わりに$("#hello")を使用しましたが、これはおおよそ同等ですが、前者はそれを行うjQueryの方法です。同じ理由
• 、私が代わりに.addEventListener('click',f)

Answer 2

の.click(f)を使用すると、そのよう$(document).ready() であなたのjQueryをラップしてみてください。

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

これはその前にページの読み込みが終了するまで待機し、CSSスクリプトを実行します。