проблема с Math.random - выводит одно и то же значение из массива

[tp-20]

Приветствую, форумчане!
есть простой текстовый рандомайзер:

var girls = ["Маша", "Даша", "Ксюша", "Катя"];
var girl = girls[Math.floor(Math.random() * girls.length)];

var actions = ['любит', 'не любит', 'уважает', 'видит'];
var act = actions[Math.floor(Math.random() * actions.length)];

var boys = ["Мишу", "Пашу", "Диму", "Федю"];
var boy = boys[Math.floor(Math.random() * boys.length)];

setInterval(function(){
$("#block").fadeOut(400, function(){
$("#block").text("Девочка " + girl + " " + act + " мальчика " + boy).fadeIn(500);
});
}, 4000);


это что-то на подобие ротатор цитат.

есть три массива: мальчики, девочки и действия.
каждые 4 секунды в блоке с id='block' рандомно должны выводиться значения из массива. Но значения выводятся одни и теже. Не меняются. Однако при перезагрузке страницы эти значения меняются один раз, и опять по кругу вертятся одни и те же значения из массивов.

К примеру сейчас выводится каждые 4 секунды таким образом:
"Девочка Даша любит мальчика Федю"
"Девочка Даша любит мальчика Федю"
"Девочка Даша любит мальчика Федю"
"Девочка Даша любит мальчика Федю"

а надо так:
"Девочка Маша любит мальчика Пашу"
"Девочка Даша видит мальчика Федю"
"Девочка Ксюша не любит мальчика Федю"
"Девочка Маша уважает мальчика Пашу"
и тд.

что нужно дописать, чтобы рандом выводил как надо?

[Malleys]

<p id="block"></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var girls = ["Маша", "Даша", "Ксюша", "Катя"];
var actions = ['любит', 'не любит', 'уважает', 'видит'];
var boys = ["Мишу", "Пашу", "Диму", "Федю"];

setInterval(function(){
$("#block").fadeOut(400, function() {
var girl = girls[Math.floor(Math.random() * girls.length)];
var act = actions[Math.floor(Math.random() * actions.length)];
var boy = boys[Math.floor(Math.random() * boys.length)];
$("#block").text("Девочка " + girl + " " + act + " мальчика " + boy).fadeIn(500);
});
}, 4000);
</script>

[tp-20]

благодарю! то, что надо!

[рони]

:)
<p id="block"></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var girls = ["Маша", "Даша", "Ксюша", "Катя"];
var actions = ['любит', 'не любит', 'уважает', 'видит'];
var boys = ["Мишу", "Пашу", "Диму", "Федю"];
function show() {
var girl = girls[Math.floor(Math.random() * girls.length)];
var act = actions[Math.floor(Math.random() * actions.length)];
var boy = boys[Math.floor(Math.random() * boys.length)];
$("#block").text("Девочка " + girl + " " + act + " мальчика " + boy).fadeIn(500, wait);
}
function wait(){
$("#block").delay(4000).fadeOut(400, show);
};

show()
</script>

[tp-20]

тоже интересно. спасибо :thanks: