要素に適用された後、innerHTMLテキストがすぐに消えます

デモ用シェルのような異なるコマンドの例を示すために、HTML/CSS/JSプリスクリプトシェルセッションを作成しようとしています。私の問題は、一旦2nd innerHTML +=が適用されると画面に表示されすぐに消えます。私はこの現象の原因を突き止めることはできません。私の考えでは、ノードに追加してそこに残す必要があるようですが、何かがリセットされていて何がわからないのでしょうか。ここで要素に適用された後、innerHTMLテキストがすぐに消えます

は私のHTMLです：

<body> 
    <div id="shell"></div> 

    <script src="shell.js"></script> 
</body>

JS：

var data = "python success.py "; 
var shellUser = '<span class=\"name\">[email protected]: ~ $ </span>'; 
var output = "success!"; 
var i = 0, text; 

(function shell() { 
    text = data.slice(0, ++i); 

    document.getElementById('shell').innerHTML = shellUser + text; 

    if (i == data.length) { 
    document.getElementById('shell').innerHTML += '<br />' + output; 
    } 

    setTimeout(shell, 150); 

}());

CSS：

@import url('https://fonts.googleapis.com/css?family=Montserrat'); 

#shell { 
     font-family: 'Montserrat', sans-serif; 
     background: #333; 
     color: #fff; 
     width: 80%; 
     height: 400px; 
     padding: 0.5rem 
    } 
    .name { 
     color: #ff00e4; 
     display: inline-block; 
     margin-right: 0.6rem; 
    }

ここでは、アクションである： https://jsfiddle.net/L0qvomeb/

私はvar outputがDOMにレンダリングされた後に消えさせることができることを、ここで何をしないのですか？ありがとう！

出典

2017-06-11 crescentfresh

それはあなたがshell()を呼び出し続ける、とi > data.lengthが、それはもはやoutput

を表示しません際、簡単な修正プログラムは、これを実行することですので、起こって： https://jsfiddle.net/L0qvomeb/1/

if (i == data.length) { 
    document.getElementById('shell').innerHTML += '<br />' + output; 
} else { 
     setTimeout(shell, 150); 
}

出典

2017-06-11 18:43:41 smerny

場合によっては、最小のものが、あなたがwhilのコードを見つめていたときに把握するのが最も難しい場合がありますe。助けてくれてありがとう！ – crescentfresh

変更i == data.lengthへi >= data.length

出典

2017-06-11 18:48:00 yly813

これは機能しますが、同じデータを表示する処理を続ける必要はありません。 – smerny

要素に適用された後、innerHTMLテキストがすぐに消えます

答えて

関連する問題