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++){
}
}
}
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>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>