'Trying to get a typewriter effect, but the text is not appearing

I'm trying to get a typewrite effect for a phrase (line 13), but when I run the code, it's not appearing. The code is below:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact</title>
    
    <link href="images/mouth.png" rel="shortcut icon">
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
    
    <script>
        var i= 0;
        var text= 'Please leave a message after the beep. If you are finished recording, hang up, or press 1 for more options.';
        var speed = 50;
        
        function typeWriter() {
          if (i < txt.length {
            document.getElementById("typing").innerHTML += txt.charAt(i);
            i++;
            setTimeout(typeWriter, speed);
          }
        }
      </script>
  </head>
  
  <body>
    <div class="topnav">
      <a href="index.html">Home</a>
      <a href="aboutme.html">About Me</a>
      <a class="active" href="contact.html">Contact</a>
    </div>
    
    <div class="row" onload="typeWriter();">
      <div class="column equal">
        <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdx7Wq9HrjElE6ExYwBLDgAittD0H73kQLvBeIOk7PgeQKljg/viewform?embedded=true" width="640" height="800" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
      </div>
      
      <div class="column equal" onload="typeWriter();">
        <!-- empty... for now -->
      </div>
    </div>
</html>

It doesn't work when I put the onload in the body declaration either.

javascripthtmlweb


Solution 1:[1]

My friend, kindly check your code/syntax when you write . in you code there are many syntax error for example :" variable 'txt'","div id 'typing' is not there”. Some like more error.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact</title>
    
    <link  href="images/mouth.png" rel="shortcut icon">
    <link  href="/style.css" rel="stylesheet" type="text/css" media="all">
   
  </head>
  
  <body>
    <div class="topnav">
      <a href="index.html">Home</a>
      <a href="aboutme.html">About Me</a>
      <a class="active" href="contact.html">Contact</a>
    </div>
    
    <div >
        here you effect ??•?•??
// you was not add the id 'typing'
        <p id="typing"></p>
    </div>
    <div class="row" id="googleForm">
      <div class="column equal">
        <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdx7Wq9HrjElE6ExYwBLDgAittD0H73kQLvBeIOk7PgeQKljg/viewform?embedded=true" width="640" height="800" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
      </div>
      
      <div class="column equal" onload=typeWriter()>
        <!-- empty... for now -->
      </div>
    </div>
     <script>
        var i= 0;
        var text= 'Please leave a message after the beep. If you are finished recording, hang up, or press 1 for more options.';
        var speed = 50;
        const googleForm = document.getElementById("googleForm");
        
        function typeWriter() {
          if (i < text.length ){
            document.getElementById("typing").innerHTML += text.charAt(i);
            i++;
            setTimeout(typeWriter, speed);
          }
        }

        googleForm.onload = typeWriter();
      </script>
</body>
</html>

You can try use in javascript: Its a good practice separate javascript of html Also you might want to check Javascript console for errors

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sanskar Sahu

Related Questions