时间戳

首页 > 解决方案 >

仅显示最后分配的值

javascript -

仅显示最后分配的值

问题描述

我有一个代码，在其中我尝试通过随机化字符（暴力破解字符串）来实现所需的字符串（“嘿！”），并在 a 中显示所有步骤<p>（下一步覆盖前一个步骤）。然而，问题是，在 中#first，只显示了排列的最后一步（“嘿！”）。

为什么它不一个接一个地显示所有步骤，只显示最后一个？我将不胜感激有关该问题的任何帮助。

注意：在控制台中，所有步骤都被记录下来。我也尝试<p>用timeout;输出字符串 没有改变。

必须是的示例： https ://i.imgur.com/fNjhjUS.gif

这是我的 Javascript 代码和 HTML：

var fline = ["H", "e", "y", "!"];
    temp_fline = [" ", " ", " ", " "],
    index = 0,
    possible = "!abc!defghijklmnopqrstuvwxyz!ABCDEFGHIJKLMNOPQRSTUVWXYZ!";

while (index < 4)
{
    if (fline[index] != temp_fline[index])
        temp_fline[index] = possible[Math.round(Math.random() * 57)];

    if (fline[index] == temp_fline[index])
        ++index;

    var tempString = "";
    for (var i = 0; i < 4; ++i)
        tempString += temp_fline[i];

    console.log(tempString);
    document.getElementById("fline").innerHTML = '> ' + tempString;
}
<html>
<body>
    <div id="first">
        <br>
        <p id="fline"></p>
        <br><br><br>
        <p id="sline"></p>
        <br><br><br>
        <p id="tline"></p>
        <br><br><br>
        <p id="fhline"></p>
    </div>
</body>
</html>

标签： javascripthtml

解决方案

您在循环的每次迭代中都覆盖了 innerHTML 而不是添加到它

尝试改变

document.getElementById("fline").innerHTML = '> ' + tempString;

至

document.getElementById("fline").innerHTML += '> ' + tempString;
                                        // ^^ concatenate instead of reassign

推荐阅读