Question

我正在尝试创建一个HTML / CSS / JS预编写的shell会话来演示不同命令的一些示例，例如演示shell。我的问题是，一旦第二个<body> <div id="shell"></div> <script src="shell.js"></script> </body>被应用，它就会出现在屏幕上并立即消失。我似乎无法弄清楚导致这种行为的原因。在我看来，它似乎应该被添加到节点并留在那里，但有些东西正在重置它，我不知道是什么。

这是我的HTML：

var data = "python success.py ";
var shellUser = '<span class=\"name\">dev@bash: ~ $ </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);

}());

JS：

@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;
  }

CSS：

var output

这里有效： https://jsfiddle.net/L0qvomeb/

我在这里错过了什么可能导致{{1}}在呈现给DOM后消失？谢谢！

Answer 1

这种情况正在发生，因为您一直在调用shell()，而在i > data.length时，它将不再显示output

一个简单的解决方法是： https://jsfiddle.net/L0qvomeb/1/

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

Answer 2

将i == data.length更改为i >= data.length

innerHTML文本在应用于元素后很快就会消失

2 个答案: