javascript - InnerHTML 在 setInterval 函数上消失

Question

我编写了一个简单的脚本，它的工作是更改页面某个部分中随机元素的innerHTML。不知何故，当我调用该函数并将其设置为每 1 秒触发一次时，当特定元素的 innerHTML 发生更改时，它不会保持这种状态，它只是清除自身并移动到另一个元素。谁能帮我这个。这是代码，提前致谢。

 window.onload = function() {
    var box1 = document.getElementById("one");
    var box2 = document.getElementById("two");
    var box3 = document.getElementById("three");
    var box4 = document.getElementById("four");
    var box5 = document.getElementById("five");
    var box6 = document.getElementById("six");
    var box7 = document.getElementById("seven");
    var box8 = document.getElementById("eight");

    var headingArray = ["RAVE", "RUN", "PAINT"];
    var iconArray = ["ion-usb", "ion-android-walk", "ion-android-color-palette"];
    var paragraphArray = ["Wanna good time? <br> Check out nearest party centres","Check out running tracks", "Ckeck out painting places"];

    var boxArray = [box1,box2,box3,box4,box5,box6,box7,box8];
    var heading = document.createElement("h2");
    var icon = document.createElement("i");
    var paragraph = document.createElement("p");

    function getRandomNumberForContent() {
        var randomHeading = Math.round(Math.random()*2) + 0;
        return randomHeading;
    }
    function getRandomNumberForBox() {
        var randomNumber = Math.round(Math.random()*7) + 0;
        return randomNumber;
    }

    function changeBox() {
        var random = getRandomNumberForContent();
        heading.innerHTML = headingArray[random];
        icon.className = "icon "+iconArray[random]+" big";
        paragraph.innerHTML = paragraphArray[random];

        var randomNum = getRandomNumberForBox();
        boxArray[randomNum].innerHTML = "";
        boxArray[randomNum].appendChild(heading);
        boxArray[randomNum].appendChild(icon);
        boxArray[randomNum].appendChild(paragraph);
    }

    setInterval(changeBox,1000);
}

Answer 1

每次调用该函数时，您都会将元素移动到新的 div，因为您将同一元素分配为子元素，而不是它的副本。

您应该在changeBox函数内创建新元素。

这就是答案。如果您在函数外部创建它，它们将是您分配给一个或另一个 div 的唯一元素。