gpt4 book ai didi

javascript - 应用于元素后,innerHTML 文本很快消失

转载 作者:行者123 更新时间:2023-11-28 17:55:45 25 4
gpt4 key购买 nike

我正在尝试创建一个 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com