试图获得打字机效果，但文本没有出现

Question

我正在尝试为一个短语（第 13 行）获得打字效果，但是当我运行代码时，它没有出现。代码如下：

<!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>

当我把 onload 放在正文声明中时，它也不起作用。

Answer 1

朋友，写的时候请检查一下code/syntax。在你的代码中有很多语法错误，例如：“variable 'txt'”，“div id 'typing' is not there”。有些人喜欢更多的错误。

<!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>

您可以尝试在 javascript 中使用：将 javascript 与 html 分开是一个很好的做法您也可能想检查 Javascript 控制台是否有错误

试图获得打字机效果，但文本没有出现

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

javascript

html

web