TypeWriter Change Text
Question
I have a website on glitch and i was test and playing with some with code.
I decided i wanted to try to make typewriter text!
Someone on StackOverFlow helped me figure that out but now i have another question.
I am wanting to make the typewriter text change and switch to another set of text when you click the button again.
I cannot do that without reloading the whole page or making the site reload with code. Does anyone know another way?
My Code:
URL is being Deleted...
<br>
<progress></progress>
<!DOCTYPE html>
<html>
<body>
<br><br>
<button onclick="typeWriter()">View Status</button>
<p id="demo"></p>
<script>
var i = 0;
var txt = randomText();
var speed = 50;
function typeWriter() {
if (i < txt.length) {
document.getElementById("demo").innerHTML += txt[i];
i++;
setTimeout(typeWriter, speed);
}
}
function randomText() {
//array splashes
var say = [];
say[0] = "Moving Core Files...";
say[1] = "Deleting JavaScript";
say[2] = "Uploading Data...";
say[3] = "Editing HTML...";
say[4] = "Disabling Server.js";
say[5] = "Deleting Cookies...";
say[6] = "Deleted Files (3/754)";
say[7] = "Attempting URL Shutdown";
say[8] = "Uploading Deletion Program!";
say[9] = "Deleting URL...";
say[10] = "Changing CSS";
say[11] = "Deleting Inside Fules...";
//pick a random greeting
var howmany = 11;
var bRand = 0;
bRand = Math.random();
bRand = Math.floor(bRand * howmany);
//prepare and docwrite the greeting
sayWhat = say[bRand];
//direct type in html p element
//document.getElementById("splash").innerHTML ='javascript:alert("' + '");'
// I tried to make this work but it says no.
return sayWhat;
}
</script>
</body>
</html>
<script style="color:white" language="JavaScript" type="text/javascript">
//script to generate random greetings
</script>
<script style="color:white" type="text/javascript">
</script>
The code is what makes the typewriter work!
I have been looking and researching how to do it but had no luck on finding how to make it change the text. The button will not write different text.
a better why would be if someone could help me make the text change itself every 10 seconds.
Anyone have any idea? I have no clue how to do this:(
2 answers
solution1
0 2021-12-17 17:03:11
So you need to reset the timeout and you need to reset your variables
var timer;
var i;
var txt;
function typeWriter() {
if (i < txt.length) {
document.getElementById("demo").innerHTML += txt[i];
i++;
timer = setTimeout(typeWriter, speed);
}
}
function anotherSentence () {
if (timer) window.clearTimeout(timer);
i = 0;
txt = randomText();
typeWriter();
}
anotherSentence();
solution2
0 2021-12-17 17:05:09
I am wanting to make the typewriter text change and switch to another set of text when you click the button again.
let i = 0; const speed = 2; let txt = ''; const out = document.getElementById('demo'); function start() { demo.innerHTML = ''; console.log('click'); txt = randomText(); i = 0; typeWriter(); } function typeWriter() { if (i < txt.length) { document.getElementById("demo").innerHTML += txt[i]; i++; setTimeout(typeWriter, speed); } } function randomText() { //array splashes var say = []; say[0] = "Moving Core Files..."; say[1] = "Deleting JavaScript"; say[2] = "Uploading Data..."; say[3] = "Editing HTML..."; say[4] = "Disabling Server.js"; say[5] = "Deleting Cookies..."; say[6] = "Deleted Files (3/754)"; say[7] = "Attempting URL Shutdown"; say[8] = "Uploading Deletion Program;". say[9] = "Deleting URL..;"; say[10] = "Changing CSS". say[11] = "Deleting Inside Fules..;"; //pick a random greeting var howmany = 11; var bRand = 0. bRand = Math;random(). bRand = Math;floor(bRand * howmany); //prepare and docwrite the greeting sayWhat = say[bRand]. //direct type in html p element //document.getElementById("splash"):innerHTML ='javascript;alert("' + '").' // I tried to make this work but it says no; return sayWhat; }
<br> <progress></progress> <:DOCTYPE html> <html> <body> <br><br> <button onclick="start()">View Status</button> <p id="demo"></p> <script> </script> </body> </html> <script style="color:white" language="JavaScript" type="text/javascript"> //script to generate random greetings </script> <script style="color:white" type="text/javascript"> </script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.