CODEWITHSUNDEEP
javascripthtmlcss
Tarik Jones
Tarik Jones

Reputation: 13

I am having trouble making a javascript typewriter effect

Its supposed to type one letter at a time when you open the page, however, it is not showing up at all. I'm a newbie at this javascript stuff.

HTML

<div class="wrap">
  <div class="test type" data-text="Hi, my name is John Doe"></div>
</div>

CSS

body {
  font: 16px/20px sans-serif;
}


.wrap {
  width: 500px;
  margin: 30px auto;
  text-align: center;
}

.test {
  margin-top: 10px;
  text-align: left;
}

JS

function typeWriter(text, n) {
  if (n < (text.length)) {
    $('.test').html(text.substring(0, n+1));
    n++;
    setTimeout(function() {
      typeWriter(text, n)
    }, 100);
  }
}

$('.type').click(function(e) {
  e.stopPropagation();

  var text = $('.test').data('text');

  typeWriter(text, 0);
});

Upvotes: 0

Views: 195

Answers (4)

Kyle
Kyle

Reputation: 302

Here's another example JavaScript code that types out a string one letter at a time, with a delay of 500 milliseconds between each letter:

const myString = "Hello, world!"; // The string to be typed out
let i = 0; // Index of the current letter to be typed out

function typeString() {
  if (i < myString.length) { // Check if there are more letters to type out
    document.getElementById("myText").innerHTML += myString.charAt(i); // Add the next letter to the text
    i++; // Increment the index for the next letter
    setTimeout(typeString, 500); // Call this function again in 2 seconds
  }
}

typeString(); // Call the function to start typing out the string
<div id="myText"></div>

This code uses a recursive function called typeString() that checks if there are more letters to type out, adds the next letter to a specified HTML element using the innerHTML property, increments the index for the next letter, and then sets a delay of 2 seconds using the setTimeout() method before calling itself again to type out the next letter. The function is called initially to start typing out the string. Note that you should replace "myText" in the code with the ID of the HTML element where you want the string to be displayed.

Upvotes: 0

Kevin .NET
Kevin .NET

Reputation: 473

You may miss the CDN. 

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
Your codes are good.

Upvotes: 1

Jimish Fotariya
Jimish Fotariya

Reputation: 1097

Use this, I made it worked in less code. Another thing i did is used some random time to give real world effect..

$(function(){
 
  var txt = $(".type").data("text").split("");
  txt.forEach(function(chr, i){
  var rand = Math.floor(Math.random() * 100) + 1;
    setTimeout(function(){
        $(".type").append( chr );
      },300*(i+1) + rand)
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test type" data-text="Hi, my name is John Doe"></div>

Upvotes: 2

matt
matt

Reputation: 1753

$(function(){
  function typeWriter(text, n) {
    if (n < (text.length)) {
      $('.test').html(text.substring(0, n+1));
      n++;
      setTimeout(function() {
        typeWriter(text, n)
      }, 100);
    }
  }

  $('.type').click(function(e) {
    e.stopPropagation();

    var text = $('.test').data('text');

    typeWriter(text, 0);
  });
});
body {
  font: 16px/20px sans-serif;
}


.wrap {
  width: 500px;
  margin: 30px auto;
  text-align: center;
}

.test {
  margin-top: 10px;
  text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="test type" data-text="Hi, my name is John Doe">Click me</div>
</div>

You needed to add something to click. (I added the text 'click me' in the div).

Upvotes: 2

Related Questions