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或另一个div的唯一元素。

Answer 2

我假设它移动到另一个元素，因为你在其他地方追加相同的元素。您可以在追加元素时克隆元素：

boxArray[randomNum].appendChild(heading.cloneNode(true));
boxArray[randomNum].appendChild(icon.cloneNode(true));
boxArray[randomNum].appendChild(paragraph.cloneNode(true));

InnerHTML在setInterval函数上消失

2 个答案: