Javascript to display Divs randomly (With text or images)

Question

I am developing a page and need to display some text and images randomly on a certain part of the page.

I found it here on the forum (Display text at random) a code that almost does what I need.

Follows the code:

$(document.body).ready(function(){
    textos = ['Texto exemplo', 'Texto 2', 'Aleatório', 'Exemplo para o usuário', 'Texto 5'];
    $('#textos').text(textos[0]);
    setInterval(function() {
        var indexTexto = Math.floor(Math.random() * textos.length); //Pegará um número aleatório entre 0 e a quantidade de textos;
        $('#textos').text(textos[indexTexto]); //Definirá o texto de acordo com o índice sorteado
    },
    1000); //1 segundo
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
<div id="textos"></div>

But I need that instead of displaying the texts that are inside the code, display some Divs calling them by their respective Ids, which have texts and images.

I have basic knowledge in HTML and no knowledge in Javascript.

If anyone can help me, I’d be grateful.

Answer 1

First position the Divs wherever the content is shown but with the style="display:None;"

<div id="div-1" style="display:none;">image</div>
<div id="div-2" style="display:none;">texto</div>
<div id="div-3" style="display:none;">image</div>

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
  //O numero máximo é excluído getRandomInt(0,100) pode mostrar de 0 até 99
}

$(document.body).ready(function(){
    var id_das_divs = ['div-1','div-2','div-3'];

    setInterval(function() {
      var indice_rand = getRandomInt( 0, id_das_divs.length );
      var div_para_mostrar = id_das_divs[indice_rand];

      // a lista de divs tem 3 items mas o índice começa no zero
      // id_das_divs[0] = div-1
      // id_das_divs[1] = div-2
      // id_das_divs[2] = div-3

      // Ah melhor esconder os divs antigos antes
      id_das_divs.forEach(function(item_da_lista) {
        $("#"+ item_da_lista ).hide();
      });
      // mostrar a nova imagem/texto
      $("#"+ div_para_mostrar ).show();
    },
    1000); //1 segundo
});