我正在构建一个待办事项列表应用程序，对oop和javascript有一个问题。我想在构造函数中创建一个值来保存我的 taskBody 它包含由输入值或本地存储的最终填充指定的html和模板文本。我的目标是在两个单独的函数中重复使用这个html，但我仍然坚持使用模板文本。

class Task {
  constructor() {
    let taskValue //Initializing a variable

    this.taskBody = `<div class="task">
    <span>${taskValue}</span> //Template Literal
      <span class="actions">

        <a class="edit-button" title="Edit Task">Edit</a>
        <button class="complete-button" title="Complete Task"><i class="fas fa-check"></i></button>

      </span>
    </div>`;

  }

  addTask = () => {
    //Prevent empty task
    if (this.input.value == "") {
      this.setPlaceholder("Please Enter A Task");
      return;
    }

    this.taskValue = this.input.value; //Trying to reassign taskValue to the input value

    this.results.innerHTML += this.taskBody; //Trying to grab the HTML from the constructor and populate with taskValue able

    ls.setLS(this.taskValue); //setting the Local Storage the Task Value, which works
  };

}

如果在待办事项列表中键入“stack overflow”，则会在html和本地存储中填充“stack overflow”，但是，它只在本地存储中填充。todo项未定义、为空或为空。
我试过使用 this.taskValue , let taskValue = "" ，及 let taskValue = null ，但我得到了上面描述的结果。我错在哪里，更具体地说，我如何在不同的函数中重用html？
这是一个代码笔，您可以在其中看到问题：
代码笔