Tracing and debugging JS code

Question

Following a beginers tutorial on a particular website and the presenters code works but mine does not. ( I believe we have the exact same code). His code executes to the point of where the alert box says "Just about to call first function" . However my code does not reach to that point. Am I missing something?

My html page

<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>

My js code

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");
};

Error

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");

Answer 1

There is no element with the id mainHeading therefore headline == null .

Attempting to assign a value to a property of null (as you do with headline.onclick = ) is an error, which causes execution to halt.

You can see this by running your code example which says:

Uncaught TypeError: Cannot set property 'onclick' of null

Answer 2

Took your same code, created an element with the ID mainHeading, works fine. See below...

 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>

Tracing and debugging JS code

Question

2 answers

solution1
0 2017-01-12 14:16:44

solution2
0 2017-01-12 14:17:25

Tracing and debugging JS code

Question

2 answers

solution1 0 2017-01-12 14:16:44

solution2 0 2017-01-12 14:17:25

solution1
0 2017-01-12 14:16:44

solution2
0 2017-01-12 14:17:25