1

I am working on an HTML page where I want function typewriter to be executed first and then for a loop to start that prints '.', to make it look like a loading screen.

This is the code I am using:

var y = 0
var i = 0;
var txt = '//Welcome To My Playground!';
var speed = 100;

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("typing").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
  y = 1;
}

while (y == 1) {
  var span = document.getElementById('myspan');
  var int = setInterval(function() {
    if ((span.innerHTML += '.').length == 11)
      span.innerHTML = '';
  }, 200);
}
window.onload = typeWriter;
<div class="main d-none d-lg-block">
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h1 class="display-1">Hi,<br>I'm Shalaj<span id="myspan"></span>
      </h1>
      <h1 id="typing" class="display-5" style="margin-top:30px;"></h1>
      <h1 class="display-5" style="margin-top:100px;">
        Prototyping = ["Arduino", "Raspberry Pi"]
        <br> Languages = ["HTML", "CSS", "PYTHON", "C++"]
      </h1>
    </div>
  </div>
</div>

The function typewriter() is getting executed but the code following it doesn't start, I assume this is because the value of y is not being set as 1. Could someone help me out here?

Thanks

Improve this question
4
  • 4
    That combination of while loop and setInterval does not seem a good thing to begin with. Commented Apr 20, 2020 at 13:26
  • 2
    If y==1 when you hit this while loop (which, fortunately, can't happen in this code), you are going to trigger the creation of an infinite number of intervals, without ever changing the value of y. Instant browser crash. Commented Apr 20, 2020 at 13:30
  • Could you tell me an alternative to achieve this without the browser crashing? Commented Apr 20, 2020 at 13:31
  • The while loop is not being executed because it is never called. You have the typeWriter function execute on load, so it will execute that and nothing else... Commented Apr 20, 2020 at 13:33

4 Answers 4

Reset to default
1

Perhaps you could create another function that is called where y is being set:

var i = 0;
var txt = '//Welcome To My Playground!';
var speed = 100;

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("typing").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  } else {
    typeEllipses();
  }
}

function typeEllipses() {
  var span = document.getElementById('myspan');
  var int = setInterval(function() {
    if ((span.innerHTML += '.').length == 11)
      span.innerHTML = '';
  }, 200);
}
window.onload = typeWriter;
<div class="main d-none d-lg-block">
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h1 class="display-1">Hi,<br>I'm Shalaj<span id="myspan"></span>
      </h1>
      <h1 id="typing" class="display-5" style="margin-top:30px;"></h1>
      <h1 class="display-5" style="margin-top:100px;">
        Prototyping = ["Arduino", "Raspberry Pi"]
        <br> Languages = ["HTML", "CSS", "PYTHON", "C++"]
      </h1>
    </div>
  </div>
</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

You're right, except that the while loop is called once, at the very start of the program.
I want the myspan to only start once the text is done printing, in this code they both start together.
@Bedir The placement doesn't matter. When the code is first executed, the while loop condition is interpreted no matter what. y equals 0 at that point, so the code in the loop isn't executed at all.
@ShalajWadhwa you can put the typeEllipses function in the else case, so that it only runs after the other text.
0

You can see what is happening if you change 

while(statement) {
  //code
}

to 

do{
   //code
}while(statement)

The do...while loop only executes once. That's because it's being run one time on execution, at the time that y == 0. The while loop the way you have it never fires at all because the one time its statement is interpreted, y == 0.

If you want to call it every time typeWriter() is called, you already have a recursive loop for that function, so just put the while code in its own function and call it from inside there.

var y = 0
var i = 0;
var txt = '//Welcome To My Playground!';
var speed = 100;

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("typing").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
  console.log(y)
  y = 1;
}

do{
  console.log("test")
  /*var span = document.getElementById('myspan');
  var int = setInterval(function() {
    if ((span.innerHTML += '.').length == 11)
      span.innerHTML = '';
  }, 200);*/
}while (y == 1) 
window.onload = typeWriter;
<div id="typing"></div>

Improve this answer

1 Comment

I want the myspan to only start once the text is done printing, in this code they both start together.
0

Hey try this No Need For Loop If you use while loop of infinite it will crash. so just use setInterval and clear the interval once theed for the loading is done clear the interval using clearInterval()

    var y = 0
    var i = 0;
    var txt = '//Welcome To My Playground!';
    var speed = 100;

    function typeWriter() {
      if (i < txt.length) {
        document.getElementById("typing").innerHTML += txt.charAt(i);
        i++;
        setTimeout(typeWriter, speed);
      }
      y = 1;
    }

 
      var span = document.getElementById('myspan');
      var interval = setInterval(function () {
        if ((span.innerHTML += '.').length == 11)
          span.innerHTML = '';
      }, 200);
    
    window.onload = typeWriter;
  <div class="main d-none d-lg-block">
    <div class="jumbotron jumbotron-fluid">
      <div class="container">
        <h1 class="display-1">Hi,<br>I'm Shalaj<span id="myspan"></span>
        </h1>
        <h1 id="typing" class="display-5" style="margin-top:30px;"></h1>
        <h1 class="display-5" style="margin-top:100px;">
          Prototyping = ["Arduino", "Raspberry Pi"]
          <br>
          Languages = ["HTML", "CSS", "PYTHON", "C++"]
        </h1>
      </div>
    </div>
  </div>

Improve this answer

Comments

0

Try this instead,

  var i = 0;
  var txt = "//Welcome To My Playground!";
  var speed = 100;
  var loading;

  function typeWriter() {
    if (i < txt.length) {
      document.getElementById("typing").innerHTML += txt.charAt(i);
      i++;
      setTimeout(typeWriter, speed);
    } else {
        var span = document.getElementById("myspan");
        var loading = setInterval(function () {
            span.innerHTML = span.innerHTML.length == 11 ? "" : span.innerHTML;
            span.innerHTML += ".";
        }, speed);
        // clearInterval(loading); // to stop loading dots
    }
  }
Improve this answer

Comments