JavaScript only works with a breakpoint set in browser debugger

Question

I have a basic function in JavaScript that simply takes some pre-set values and puts them onto the screen by the use of a pre-made function. When I breakpoint the first line of what it is I'm doing, the page loads fine, as expected, but as soon as I remove that breakpoint, none of the information is set. and the page is blank.

this.QuizSelection = function () {
        // Fill the ID's with the right info
        app.SetBackground('head', this.HeroImage);
        console.log('1 ' + this.HeroImage);
        app.LoadInnerHTML('breadcrumbs', 'Home / ' + this.Title);
        app.LoadInnerHTML('quizSelectionTitle',this.Title);
        console.log('2 ' + this.Title);
        app.LoadInnerHTML('quizSelectionIntro',this.Introduction);
        console.log('3 ' + this.Introduction);
        // Show the Quiz Selection and Heading
        app.ShowSection('head');
        app.ShowSection('quizSelection');
        console.log('Quiz Selection');
    }.bind(this);

The functions inside that (SetBackground and LoadInnerHTML) are just small one line functions that change the inner html and the set a background image.

// Change Inner HTML
this.LoadInnerHTML = function (id, html) {
    var d = document.getElementById(id);
    d.innerHTML = html;
}

// Set Background Image
this.SetBackground = function (id, image) {
    document.getElementById(id).style.backgroundImage = 'url(image)';
}

I can't understand why it wouldn't work when the breakpoint isn't on. Clearly it does work, because everything is fine with the breakpoint on, but then when it's off the result I get output to the console is:

1     
2 
3 undefined 
Quiz Selection 

Answer 1

You have a race condition.

The act of hitting a breakpoint makes your code wait for the async JSON load to complete. Without the breakpoint, the code trying to read the JSON is executing before the JSON has actually loaded.

See How do I return the response from an asynchronous call? for how to fix this issue.

Answer 2

You have console.log statements in your code. When the debugger is not on, console object does not exist (this is true for IE not for Chrome to the best of my knowledge), thus your javascript code execution fails.