Javascript: Trying to make text randomly generate

Question

I am trying to make the starting text state Hi there, as you can see I am Sheldon Aldridge and in the javascript sentenceArray will contain the list of text that will replace the speech-bubble class with the innerHTML, I started a for loop to cycle through the array, I am not sure how to achieve that?

Outcome: sentenceArray should replace the speech-bubble at random with a set time interval in between every random text.

HTML

 <div class = "speech-bubble">
        <p>Hi there, as you can see I am Sheldon Aldridge</p>
      </div>
    </div>

JS

let sentenceArray = [
    "Fun fact about me, I love video games, I have been playing video games since I was 10 years old",
    "I want to be a front end developer because creating and the building is a passion of mine",
    "You should really look at the projects I built, you can get a good look at my skillsets",
    ]
  

  function textgen(sentenceArray){
    
  let speechbubble = document.querySelector(".speech-bubble");
  
  let speechlength = speechbubble.length;

  while(speechbubble){
    for(let i = 0; i < speechlength; i++){
      
    }
 }
}

If you want to change innerHTML at an interval, you don't need to run a loop. You can use `setInterval` and generate a random number and select the sentence from sentenceArray to display in `
` — Inder, May 09 '22 at 21:18
You probably want to use the query selector `.speech-bubble p` to replace the text inside the `
`. — Barmar, May 09 '22 at 21:19

Yasser CHENIK · Answer 1 · 2022-05-09T21:58:49.827

1

Here is small code that does what you want BUT it does have a problem, You need to find a way to generate a random number but without repeating the same one you just used ! But i think this is a good starting point for you !

const sentenceArray = [
    "Fun fact about me, I love video games, I have been playing video games since I was 10 years old",
    "I want to be a front end developer because creating and the building is a passion of mine",
    "You should really look at the projects I built, you can get a good look at my skillsets",
    ];
  

function textgen(){
   let random  = Math.floor(Math.random() * sentenceArray.length );//this generates a random number between 0 and sentenceArray's length
   document.querySelector(".speech-bubble").innerHTML= '<p>' + sentenceArray[random] + '</p>' ;
   setTimeout(()=>{
      textgen();

   },2000);//2000 means 2secs
}

textgen();

<div class = "speech-bubble">
</div>

edited May 09 '22 at 21:58

answered May 09 '22 at 21:39

Yasser CHENIK

370
1
6
17

2

Why are you calling a function to calculate random? It can simply be `const random = Math.floor(Math.random() * sentenceArray.length);` – Inder May 09 '22 at 21:44
Thanks, for the above code, that will be fine, I am going to add a tone of sentences so I do not think a repeat will be needed. – AspiringDev May 09 '22 at 21:51
@Inder correct , i simplified a function that used max and min because the min is 0 , i can't believe i missed that . – Yasser CHENIK May 09 '22 at 21:55

score 1 · Accepted Answer · answered May 09 '22 at 21:57

This should work. using setInterval with a interval of 2 seconds

let sentenceArray = [
  "Fun fact about me, I love video games, I have been playing video games since I was 10 years old",
  "I want to be a front end developer because creating and the building is a passion of mine",
  "You should really look at the projects I built, you can get a good look at my skillsets"
];

const el = document.querySelector(".speech-bubble p");

setInterval(() => {
  const random = Math.floor(Math.random() * sentenceArray.length);
  el.innerText = sentenceArray[random];
}, 2000);

<!DOCTYPE html>
<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
</head>

<body>
    <div class = "speech-bubble">
        <p>Hi there, as you can see I am Sheldon Aldridge</p>
    </div>
</div>
</body>

</html>

Javascript: Trying to make text randomly generate

2 Answers2