.innerHTML 在 <p> 标记上返回 undefined答案

【问题标题】：.innerHTML returns undefined on <p> tag.innerHTML 在 <p> 标记上返回 undefined
【发布时间】：2017-10-13 10:04:32
【问题描述】：

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

我有一个处理动画部分的 JavaScript 类。这必须是一堂课，因为还会发生其他事情。

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() 但这并没有影响未定义的只有好句。

我自己也不确定为什么会这样。如果您需要更多上下文或问题不清楚，请告诉我。

【问题讨论】：

destination.innerHTML = this.sContents + sContents 是一个本地变量，所以它是destination.innerHTML = sContents +

标签： javascript jquery html class innerhtml

【解决方案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>

【讨论】：

感谢这项工作！将在 9 分钟内接受作为答案 :)

【解决方案2】：

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

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

【讨论】：