New course! Every coder should learn Generative AI!
Try a free lesson0
How can I make to pause when clicking on the screen, in this code?
<html> <head> <style> body{ } #text{ color:#000000; font-size:2em; font-family: 'Arial'; } </style> </head> <body> </div> <div id="text" ></div> <script> window.addEventListener("click",play); function play() { document.getElementById("m").play(); } var story ="Hi! this is a test"; var text = document.getElementById("text"); setInterval(add,60); var i = 0; function add(){ if(story[i] == "Z"){ text.innerHTML += br + "......"; i++; } if(i < story.length){ text.innerHTML+=story[i]; i++; } } </script> </body> </html>
4 Answers
+ 1
You want to pause when a special symbol such as capital Z is found in your string, right? Since capital Z can be expected to indicate something other than a pause, I added to the condition that it must either be a Z at the end of a line or a Z at the end of the string.
Your question says to pause when clicking on the screen but what are you pausing; the text typing animation? You have code checking for "Z" and adding ..... so that looks like more of a reason to pause.
If you confirm the above, this should do what you want.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#text{
color:#000000;
font-size:2em;
font-family: 'Arial';
}
</style>
</head>
<body>
<div id="text"></div>
<script>
// FIXME: add a playable HTML element with id="m" so this actually does something.
window.addEventListener("click", play);
function play() {
document.getElementById("m").play();
}
var story ="Hi! this is a testZ\nWoohoo!\nZoro is here to the rescue.";
var text = document.getElementById("text");
setInterval(add,60);
var i = 0;
var pauseTimeCount;
function add(){
if (pauseTimeCount !== undefined) {
// the * 5 and % 5 is so the dots appear 5 times slower than ordinary characters.
if (pauseTimeCount < 6 * 5) {
if (pauseTimeCount % 5 === 0)
text.innerHTML += ".";
pauseTimeCount++;
}
else {
pauseTimeCount = undefined;
}
}
else if (i >= story.length) {
// do nothing.
}
else if(story[i] == "Z" && (story.length === i + 1 || story[i + 1] === '\n')){
pauseTimeCount = 0;
i++;
}
else if (story[i] === '\n') {
text.innerHTML += '<br>';
i++;
}
else {
text.innerHTML+=story[i];
i++;
}
}
</script>
</body>
</html>
+ 1
make a function to call to pause when window is clicked. make a variable for the setInterval method. Then call the clearInterval method to pause.
here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<style>
body {
background-color: #fff;
}
#text {
color: #000000;
font-size: 2em;
font-family: 'Arial';
}
</style>
</head>
<body>
</div>
<div id="text"></div>
<script>
window.addEventListener("click", play);
window.addEventListener("click", pause); // when window is clicked pause.
function play() {
document.getElementById("m").play();
}
var story = "Hi! this is a test";
var text = document.getElementById("text");
var intervalCaller = setInterval(add, 60);
var i = 0;
function add() {
if (story[i] == "Z") {
text.innerHTML += br + "......";
i++;
}
if (i < story.length) {
text.innerHTML += story[i];
i++;
}
}
// to pause
function pause() {
clearInterval(intervalCaller);
}
</script>
</body>
</html>
0
Obiri Sacalivin It is what I was looking for but as it resume the text animation?
0
Josh Greig You helped me understand something I had wanted to know for a long time ¡Thank you!
Often have questions like this?
Learn more efficiently, for free:
Hot today
Isogram Detector
2 Votes
R programming
2 Votes
How to add shadow on text
0 Votes
Hello
0 Votes
Help me with phyton
2 Votes