我正在尝试创建一个 HTML/CSS/JS 预先编写脚本的 shell session 来演示不同命令的一些示例，例如演示 shell。我的问题是，一旦应用第二个 innerHTML += ，它就会出现在屏幕上并立即消失。我似乎无法弄清楚是什么导致了这种行为。在我看来，似乎应该将其添加到节点并留在那里，但有些东西正在重置它，但我不知道是什么。
这是我的 HTML:
<body>
<div id="shell"></div>
<script src="shell.js"></script>
</body>
JS:
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);
}());
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 输出 在渲染到 DOM 后消失？谢谢!
最佳答案
发生这种情况是因为您不断调用 shell()，并且当 i > data.length 时，它将不再显示输出
一个简单的解决方法是执行以下操作: https://jsfiddle.net/L0qvomeb/1/
if (i == data.length) {
document.getElementById('shell').innerHTML += '<br />' + output;
} else {
setTimeout(shell, 150);
}
关于javascript - 应用于元素后，innerHTML 文本很快消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44487390/