How to show random text in div on button click?

Question

JavaScript

Hello! Help solve the problem. I have a div field that should display random text on button click. I’ll make a reservation right away that I also created this question on another site and I was only offered to write a php handler if the data is taken from bd or create .json and store all the verses there.
Can anyone at least point me to the point to paint what needs to be done for this? And what would be a better/easier way to store poetry?
The problem is that you need to somehow sort all the text for each link. That is, that certain phrases belong only to a specific link.
While there is a terrible mess in my head, how to do all this, but I will try to unsubscribe in the order of the algorithm.
Selecting an appropriate topic
Loading specific phrases for this topic
Random display of phrases in div on button click.
For clarity of the example, I sketched out a simple code here:
codepen.io/anon/pen/yYjwWG
That is, you need to select a poet and load specific verses in random order belonging to this poet by pressing a button.
I hope I correctly interpreted my problem. Tried the best I could. Maybe I'll think of it later myself, because I've been at work for 15 hours without sleep and my head is a terrible mess .. And it doesn't cook .. But in any case, I need the help of people who understand javascript much better than me.

Answer 1

In general, if there are not very many verses (phrases), you can do without PHP and a database. Just put data in json file. And in javascript, load it and display what you need.
The file structure might be like this:

{
  [
    {
        author: "Пушкин",
        texts: [ 'text1', 'text2', .....],
    },
    {
        author: "Лермонтов",
        texts: [ 'text3', 'text4', .....],
    }
  ]
}

To set a random text - you can simply generate a random number from the segment [0, texts.length-1].
In general - you can divide poems by authors - that is, 1 author - 1 file. It all depends on your end goal.