CODEWITHSUNDEEP
javascriptjquery
JazzyP
JazzyP

Reputation: 948

Javascript stops working after this code

I have written this code for a cmd console-like typing effect. The code itself works fine but any code I place after it doesn't work. I've been trying to figure it out for a while now and I'm pretty stuck.

Here's a JSFiddle of the problem. http://jsfiddle.net/GWj4b/

/**
 * CONSOLE
 */

setInterval(cursorBlink, 500);
function cursorBlink() {
    if($('#cursor').css('visibility') == 'hidden'){
        $('#cursor').css({'visibility': 'visible'});
    } else {
        $('#cursor').css({'visibility': 'hidden'});
    }
}

var text = $('#type').html();
var text = text.replace(/<br>/g, '_');

$('#type').html('');

$.each(text.split(''), function(i, letter) {
    setTimeout(function(){
        if(letter == '_'){
            $('#type').html($('#type').html() + '<br />');
        } else {
            $('#type').html($('#type').html() + letter);
        }
    }, 100 * i);
});

Upvotes: 0

Views: 76

Answers (4)

Kimtho6
Kimtho6

Reputation: 6184

I just debugged it and it looks like that text is undefined, so maybe you haven't created the element in html.

var text = text.replace(/<br>/g, '_');

Upvotes: 1

melc
melc

Reputation: 11671

Indeed you are missing some html code and the text you try to manipulate is undefined. You could add the following html code,

<span id="type">is this what you try to do????</span><span id="cursor">_</span>

to achieve the effect you are aiming for.

http://jsfiddle.net/JKp5z/

Upvotes: 0

Ben McCormick
Ben McCormick

Reputation: 25728

If you look in the console log you see: Uncaught TypeError: Cannot call method 'replace' of undefined

text is not defined when you call replace on it because the element you're looking for doesn't exist.

You can test to see if it exists like this

if(text) {
  text.replace(/<br>/g, '_');
}

Javascript will stop execution if it hits a runtime error like this.

Consider learning more about debugging this type of issue with Chrome's dev tools or an equivalent in your browser. Once you look to see the error, its pretty clear what line is causing the issue.

Incidentally, after adding the elements that you are trying to reference, the code executes through. If they might not exist though, you need to do the checking in code, and its a good habit regardless.

http://jsfiddle.net/GWj4b/1/

Upvotes: 1

Gonzalo.-
Gonzalo.-

Reputation: 12672

You're not using HTML right?

after

$('#type') returns undefined, and then you do text.replace(/<br>/g, '_');

you cannot do undefined.replace, so it fails, and the execution stops.

Try to add the html code for that JS code

Also, you must add JQuery to your fiddle, in the Frameworks & Extensions part.

See this fiddle http://jsfiddle.net/9748L/

Upvotes: 1

Related Questions