javascript - Move Prior Texts In Array Below Latest Text Instead of Being Overwritten

Question

What we have now: So the texts (or sentences) in the array will show every onClick action. The prior texts will be overwritten by the latest texts.

What we want to achieve: Rather than being overwritten, I want all the prior texts to simply move down below the latest texts. Imagine a chat convo where the previous messages simply go down below the latest message in order. I hope it's possible.

What is this for: I want to make like a simple storybook for my little girl. She easily gets overwhelmed by too much words in books and loses interest. I want her to be able to read offline too. So I will definitely appreciate it if we can keep it in vanilla javascript.

This may be easy for most, but I am just like in a primary level right now when it comes to coding. I apologize in advance for my lack of knowledge. But thank you to anyone who can help me.

HTML

<button type="button" id="myBtn">Next</button>
<br><br>
<span id="myText"></span>

Vanilla Javascript

<script>
var texts = [
"text/sentence 1",
"text/sentence 2",
"text/sentence 3",
"text/sentence 4",
"text/sentence 5"
];
var text = document.getElementById("myText");
var btn = document.getElementById("myBtn");
btn.addEventListener("click", changeText);
text.innerHTML = texts[0];


function changeText() {
    var searchTerm = text.innerHTML;
    var index = texts.indexOf(searchTerm) + 1;
    if (index == texts.length) index = 0;
    var result = texts[index];
    text.innerHTML = result;
    return;
}
</script>

question from:https://stackoverflow.com/questions/65898761/move-prior-texts-in-array-below-latest-text-instead-of-being-overwritten

Answer 1

You may consider a variable which store all the texts which have been read. Thus upon a new text, create the new string with that text to which you concatenate the variable (below named str)

var texts = [
"text/sentence 1",
"text/sentence 2",
"text/sentence 3",
"text/sentence 4",
"text/sentence 5"
];
var text = document.getElementById("myText");
var btn = document.getElementById("myBtn");
btn.addEventListener("click", changeText);
let str = '<p>'+texts[0]+'</p>';
text.innerHTML = str

let index = 1
function changeText() {
  str = '<p>' + texts[index] + '</p>' + str
  myText.innerHTML = str
  index = (index + 1) % texts.length 
}

<button type="button" id="myBtn">Next</button>
<br><br>
<div id="myText"></div>