CODEWITHSUNDEEP
javascripthtmlweb
theartking
theartking

Reputation: 23

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.

Upvotes: 2

Views: 96

Answers (1)

DSDmark
DSDmark

Reputation: 1261

Check your code/syntax when you write. In your code there are many syntax errors. For example, the variable txt and a <div> with the id typing are not there.

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();
<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 Ꮚˊ•⌔•ˋᏊ
  <p id="typing"></p> <!-- you did not add the id 'typing' here -->
</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>

It's a good practice separate JavaScript from HTML. Also you might want to check the JavaScript console for errors.

Upvotes: 1

Related Questions