2013-12-08 88 views
0

我已經編寫了一個類似於cmd控制檯的打字效果的代碼。代碼本身工作正常,但它沒有工作後我放置的任何代碼。我一直試圖弄清楚一段時間,而且我很困難。此代碼後Javascript停止工作

這是一個JSFiddle的問題。 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); 
}); 
+1

哪種調試方法到目前爲止您嘗試過? – helle

+0

瞭解[JavaScript錯誤控制檯](http://www.netmagazine.com/tutorials/javascript-debugging-beginners)是如何工作的。 – JJJ

+0

首先:用於調試使用'console。log()' - 當然有一個控制檯打開 - 而不是'alert()'。有時候你想要代碼執行停止的效果,但在大多數情況下,它更像是一種障礙而不是一種好處,因爲你可以通過斷點來更好地實現這一點。此外,控制檯格式複雜的數據(對象,數組)更好。 –

回答

1

登錄你看:當你調用替換它Uncaught TypeError: Cannot call method 'replace' of undefined

文本沒有定義的,因爲你正在尋找不存在的元素。

您可以測試,看它是否存在這樣的

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

的Javascript如果它擊中一個運行時錯誤像這樣將停止執行。

請考慮進一步瞭解如何使用Chrome的dev tools或瀏覽器中的相應內容來調試此類問題。一旦你看到錯誤,它很清楚哪一行導致了這個問題。

順便提一句,在添加您嘗試引用的元素後,代碼將執行完畢。如果它們可能不存在,則需要執行代碼檢查,並且不管它是否是一個好習慣。

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

+0

感謝你和其他已經回來的人。 #type元素只存在於一個頁面上,而腳本正在所有頁面上運行。現在我將把這些代碼移到它自己的文件中,只在一個頁面上調用它。謝謝。 – JazzyP

1

您是不是正在使用HTML?

$('#type')回報undefined,然後你做text.replace(/<br>/g, '_');

你不能做undefined.replace,所以它失敗,並且停止執行。

嘗試添加HTML代碼也JS代碼

,你必須添加了jQuery的小提琴,在框架&擴展部分。

如果您在控制檯中去看一看這個小提琴http://jsfiddle.net/9748L/

1

我剛剛調試它,它看起來像文本是不確定的, 所以也許你還沒有創建HTML中的元素。

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

你的確缺少了一些HTML代碼,並試圖操縱文本undefined。 您可以添加下列HTML代碼,

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

實現你的目標的效應。

http://jsfiddle.net/JKp5z/