How to store HTML content within an array for Javascript?

Question

My aim is to have a single web page which changes back and forth between two pieces of code every 60 seconds. I am able to do this with two urls/webpages using content refresh, however, ideally I am trying to include it all in one javascript file.

page1content and page2content indicate where I would want to insert the html code within the array. The HTML code is run within a js filter using Rhapsody Integration engine.

Any thoughts on how I might be able to get html content to switch between the two in a continous loop?

var next = output.append(input[0]);

var html = "";
html = html + "<style>";
html = html + "<span id=\"flicker\"></span>";
html = html + "</style>";

var pageContent = ["page1content", "page2content"];
var count = 0;

function changeContent() {
    $("#flicker").text(pageContent[count]);
    count < 2 ? count++ : count = 0;
}
setInterval(changeContent, 60000);

XMLData.setText(HTMLBody,'UTF8');

Answer 1

Try the snippet below:

const pageContent = [
` <p>This is from page 1.</p>
  <p>This is another paragraph from page 1.</p>`, 
` <p>This is from page 2.</p>
  <p>This is another paragraph from page 2.</p>`];
let count = 0;

function changeContent() {
    $("#flicker").html(pageContent[count]);
    count++; count %= 2;
}
setInterval(changeContent, 5000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="flicker"></div>

P.S: Setting the interval to 5 seconds to showcase the functionality more quickly