Javascript: попытка создать текст случайным образом
Я пытаюсь сделать начальное текстовое состояние Hi there, as you can see I am Sheldon Aldridge, а в javascript sentenceArray будет содержаться список текста, который заменит speech-bubble class на innerHTML, я запустил цикл for для циклического перебора массива, я не уверен, как этого добиться?
Результат: sentenceArray должен случайным образом заменить speech-bubble на заданный интервал времени между каждым случайным текстом.
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++){
}
}
}
Вероятно, вы захотите использовать селектор запросов .speech-bubble p, чтобы заменить текст внутри <p>.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вот небольшой код, который делает то, что вы хотите, НО у него есть проблема. Вам нужно найти способ сгенерировать случайное число, но без повторения того же самого, которое вы только что использовали! Но я думаю, что это хорошая отправная точка для вас!
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>Почему вы вызываете функцию для вычисления случайного числа? Это может быть просто const random = Math.floor(Math.random() * sentenceArray.length);
Спасибо, за приведенный выше код, это будет хорошо, я собираюсь добавить тон предложений, поэтому я не думаю, что потребуется повторение.
@ Правильно, я упростил функцию, которая использовала максимум и минимум, потому что минимум равен 0, я не могу поверить, что пропустил это.
Это должно работать. используя setInterval с интервалом в 2 секунды
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>
Если вы хотите изменять innerHTML с интервалом, вам не нужно запускать цикл. Вы можете использовать
setIntervalи сгенерировать случайное число и выбрать предложение из массива предложений для отображения в<p>