.innerHTML在<p>标签上返回undefined

Question

.innerHTML在<p>标签上返回undefined

Fut*_*ake -1 html javascript jquery class innerhtml

我有一个类,它对<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)
    }
  }
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

所以,当我为文本制作动画时,我知道"undefined" + text为什么会发生这种情况？请参阅下面的图片以了解问题:

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

所以回顾一下,我不明白为什么undefined会被添加？我怎样才能删除这个未定义的.我尝试substring()但这并没有影响undefined只有好句子.

我不确定自己为什么会这样.如果您需要更多上下文或问题不明确,请告诉我.

Answer 1

小智 5

只需删除" this"上的" this.sContents"

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)
	}
}
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，7 月前
查看次数：	574 次
最近记录：	8 年，7 月前