Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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

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

Answer 1

只需删除“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)
	}
}
}

<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。您确实从未在该名称下声明该类的属性。但是有一个名为sContents的变量。我怀疑你打算插入以下行：

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

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

2 个答案: