JSコードのトレースとデバッグ

-1

特定のWebサイトでの初心者のチュートリアルに続いて、プレゼンターのコードは動作しますが、私のものはありません。（私は私達が全く同じコードを持っていると信じています）。彼のコードは、警告ボックスに「ちょうど最初の関数を呼び出す」と書かれています。しかし、私のコードはその点に達していません。何か不足していますか？JSコードのトレースとデバッグ

私のhtmlページ

<html> 
    <head> 
     <title>Debugging and Tracing through code</title> 
     <script src="tracing.js"></script> 
    </head> 

    <body> 
     <p>Example of tracing through code.</p> 
     <h1 id="mainHeading">Interesting Headline</h1> 
    </body> 
</html>

私のjsのコード

function firstFunction() { 
    secondFunction(); 
} 

function secondFunction() { 
    thirdFunction(); 
} 

function thirdFunction() { 
    fourthFunction(); 
} 

function fourthFunction() { 
    headline.innerHTML = "You clicked the headline!"; 
} 

var headline = document.getElementById("mainHeading"); 
alert("Ive grabbed main heading"); 
headline.onclick = function() { 
    alert("just about to call first function"); 
    firstFunction(); 
    alert("I've called first function"); 
};

エラー

2 Missing 'use strict' statement. secondFunction(); 
2 Expected 'secondFunction' at column 5, not column 4. secondFunction(); 
2 'secondFunction' was used before it was defined. secondFunction(); 
6 Missing 'use strict' statement. thirdFunction(); 
6 'thirdFunction' was used before it was defined. thirdFunction(); 
10 Missing 'use strict' statement. fourthFunction(); 
10 'fourthFunction' was used before it was defined. fourthFunction(); 
14 Missing 'use strict' statement. headline.innerHTML = "You clicked the headline!"; 
14 'headline' was used before it was defined. headline.innerHTML = "You clicked the headline!"; 
18 'alert' was used before it was defined. alert("Ive grabbed main heading"); 
20 Missing 'use strict' statement. alert("just about to call first function");

出典

2017-01-12 Andy

あなたはID "mainHeading" とhtml要素を持っていない...以下を参照してください？ – Snowmonkey

あなたのマークアップを投稿してください。 – TheValyreanGroup

あなたのコードをコピー＆ペーストし、jsfiddle：https://jsfiddle.net/snowMonkey/u7t7rcna/として実行しました。うまくいきます。 – Snowmonkey

idがmainHeadingなので、headline == nullの要素がありません。

nullのプロパティに値を割り当てようとすると（headline.onclick =と同様に）エラーが発生し、実行が停止します。

あなたが言うそのあなたのコード例を実行することで、これを見ることができます：

Uncaught TypeError: Cannot set property 'onclick' of null

出典

2017-01-12 14:16:44 Quentin

返信いただきありがとうございます。私はIdのmainHeading要素を持っていました。 19 Uncaught TypeError：nullエラーのプロパティ 'onclick'を設定できません....そして、スクリプトタグがAFTERの代わりにHTMLマークアップの前に配置されたためです。私はあなたの以前の記事の1つでこれを見つけました\t 編集日May 11 '16 at 22:29。ありがとう – Andy

は、あなたと同じコードを取ったID mainHeadingを持つ要素を作成し、正常に動作します。

function firstFunction() { 
 
    secondFunction(); 
 
} 
 

 
function secondFunction() { 
 
    thirdFunction(); 
 
} 
 

 
function thirdFunction() { 
 
    fourthFunction(); 
 
} 
 

 
function fourthFunction() { 
 
    headline.innerHTML = "You clicked the headline!"; 
 
} 
 

 
var headline = document.getElementById("mainHeading"); 
 
alert("Ive grabbed main heading"); 
 
headline.onclick = function() { 
 
    alert("just about to call first function"); 
 
    firstFunction(); 
 
    alert("I've called first function"); 
 
};

<h2 id="mainHeading">Coo coo ka-choo</h2> 
 
<div id="content-pane"></div>

出典

2017-01-12 14:17:25 Snowmonkey

JSコードのトレースとデバッグ

答えて

関連する問題