InnerHTML dissapearing on setInterval Function

Question

Я написал простой скрипт, и его задачей является изменение innerHTML случайного элемента в одном разделе страницы. Как-то, когда я вызываю функцию и устанавливаю ее на огонь каждую секунду, когда 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, либо другому.

Answer 2

Я предполагаю, что он перемещается в другой элемент, потому что вы добавляете те же элементы в другое место. Вы можете клонировать элементы при их добавлении:

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