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

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 >
      <a href="index.html">Home</a>
      <a href="aboutme.html">About Me</a>
      <a  href="contact.html">Contact</a>
    </div>
    
    <div  onl oad="typeWriter();">
      <div >
        <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  onl oad="typeWriter();">
        <!-- empty... for now -->
      </div>
    </div>
</html>

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

CodePudding user response：

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 >
      <a href="index.html">Home</a>
      <a href="aboutme.html">About Me</a>
      <a  href="contact.html">Contact</a>
    </div>
    
    <div >
        here you effect Ꮚˊ•⌔•ˋᏊ
// you was not add the id 'typing'
        <p id="typing"></p>
    </div>
    <div  id="googleForm">
      <div >
        <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  onl oad=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