.innerHTML returns 在 <p> 标签上未定义

Question

我有一个 class 可以在包含一些文本的 <p> 元素上创建打字机效果。请参阅下面的 HTML 和 JavaScript。

我在 JavaScript 中有一个 class 来处理动画部分。这必须是 class 因为还会发生其他事情。

var ani;
$(document).ready(function() {
  ani = new Animate_text("test sentence", false, 30);
  ani.writer();
});



class Animate_text {

  constructor(text, dynamic, speed) {
    this.text = text;
    this.speed = speed;
    this.dynamic = dynamic;
    this.chars = text.length;
    this.text_loc = 0;
    this.timerID = null;
    this.animate_image = false;
  }



  writer() {
    var sContents = "";
    var destination = document.getElementById("text");
    console.log(destination.innerHTML);
    destination.innerHTML = this.sContents + this.text.substring(0, this.text_loc) + "";

    if (this.text_loc++ == this.chars) {
      this.text_loc = 0;
      if (this.dynamic) {
        window.clearTimeout(this.timerID);
        ani = null;
      } else {
        window.clearTimeout(this.timerID);
        ani = null;
      }
    } else {
      this.timerID = setTimeout(function() {
        if (ani != null) {
          ani.writer();
        }
      }, this.speed)
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide_main_container">
  <div id="text_container">
    <div id="two_dots_container">
      <img src="supporting_data/dots.jpg">
    </div>
    <div id="text_wrapper">
      <p id="text"></p> //
      <-- this is the element i want to target. </div>
    </div>
    <div id="image_container">
    </div>
  </div>
</div>

所以当我为文本设置动画时，我得到 "undefined" + text 为什么会这样？请参见下图以演示问题：

所以它应该只说 "spanish not dynamic text" 而不是 "undefinedspanish not dynamic text"

总而言之，我不明白为什么要添加 undefined ？我怎样才能删除这个未定义的。我试过 substring() 但这并没有影响 undefined 只有好句子。

我自己也不确定为什么会这样。如果您需要更多背景信息或者问题不明确，请告诉我。

Answer 1

只需删除“this.sContents”上的“this”

var ani;
$(document).ready(function(){
 ani = new Animate_text("test sentence", false, 30);
 ani.writer();
});



class Animate_text{
 
 constructor(text, dynamic, speed){
  this.text = text;
  this.speed = speed;
  this.dynamic = dynamic;
  this.chars = text.length;
  this.text_loc = 0;
  this.timerID = null;
  this.animate_image = false;
 }

 writer(){
 var sContents = "";
 var destination = document.getElementById("text");
 destination.innerHTML = sContents + this.text.substring(0, this.text_loc) + "";
 
 if ( this.text_loc++ == this.chars ) {
  this.text_loc = 0;
  if (this.dynamic) {
   window.clearTimeout(this.timerID);
   // animation.setup();
   // animation.draw_points();
   ani = null;
  }else{
   window.clearTimeout(this.timerID);
   this.animate_image = true;
   //here we call the animate class
   // animate_image.draw_text();
   ani = null;
  }
 }else{
  this.timerID = setTimeout(function(){
   if(ani != null){
    ani.writer();
   }
  }, this.speed)
 }
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
 <div id="slide_main_container">
  <div id="text_container">
   <div id="two_dots_container">
    <img src="supporting_data/dots.jpg">
   </div>
   <div id="text_wrapper">
    <p id="text"></p>
   </div>
  </div>
  <div id="image_container">
  </div>
 </div>
</body>

Answer 2

this.sContents 是 undefined。您确实从未在该名称下的 class 上声明属性。然而，有一个名为 sContents 的变量。我怀疑您打算改为插入以下行：

destination.innerHTML =
      sContents
    + this.text.substring(0, this.text_loc)
    + "";

.innerHTML returns 在 <p> 标签上未定义

.innerHTML returns undefined on <p> tag

html

javascript

jquery

class

innerhtml