間隔を指定して既存のテキストの後にテキストを表示

Question

Zup Stackoverflow！ 解決できない問題について質問があります。私は、h2タグの中に既に存在するテキストの後にのみ表示されるはずのinterval関数でテキストを追加したい。データはリスト配列から得られます。したがって、このような何か：

HTML：

<div id="output"> 
    <h2 id="funny-day">Funny day: (HERE IS WHERE I WANT THE OUTPUT TO BE)</h2> 
</div> 

Javascriptを：

//Get elements 
var funny-day = document.getElementById("funny-day"); 

//Array 
var list = ["Sunny", "Cloudy", "Rainy"] 

//Function to output array 
var index = 0; 
markiser.innerHTML = markiser.textContent; 
setInterval(function() { 

    var text = (list[index++ % list.length]).toString(); 
    markiser.innerHTML += text; <<Not working ofcourse since it only appends 

}, 2000); 

重要な注意事項は、私は維持したいということです "ファニー日：" H2タグ内にあるためSEOの目的の。私は、例えば、何の意味を成していないいくつかのことを編集し

Answer 1

は、なぜあなたは、あなたの関数がそれに-を持つことはできません<span class="data">yourdata</span>

//Get elements 
 
var funnyDay = document.getElementById("funny-day"); 
 

 
//Array 
 
var list = ["Sunny", "Cloudy", "Rainy"] 
 

 
//Function to output array 
 
var index = 0; 
 
setInterval(function() { 
 

 
    var text = (list[index++ % list.length]).toString(); 
 
    document.getElementById("data").innerHTML = text 
 

 
}, 2000);

<div id="output"> 
 
    <h2 id="funny-day">Funny day: <span id="data" >(HERE IS WHERE I WANT THE OUTPUT TO BE)</span></h2> 
 
</div>

のようなあなたのデータのためのspecificlyタグを追加しないでくださいまた、markiserがスコープに定義されていませんでした。

Answer 2

これは何か？

//Get elements 
 
var funnyday = document.getElementById("funny-day"); 
 

 
//Array 
 
var list = ["Sunny", "Cloudy", "Rainy"]; 
 

 
//Function to output array 
 
var index = 0; 
 

 
funnyday.innerHTML = ("Funny day: " + list[index]); 
 
index=index >= list.length - 1 ? 0 : index+1; 
 
setInterval(function() { 
 
    funnyday.innerHTML = ("Funny day: " + list[index]); 
 
    index=index >= list.length - 1 ? 0 : index+1; 
 
}, 2000);

<div id="output"> 
 
    <h2 id="funny-day">Funny day: </h2> 
 
</div>