在类中，在另一个方法中调用 addEventlistener 的方法中的元素 HTML

Question

（我是法国人，我会尝试用英语解释，但如果你听不懂，我很抱歉）。 我在 MDN 上查找过，并尝试在这里找到答案，但我认为我没有使用好的关键字。

所以，我正在学习 JS，并且我有一个练习要做我的第一堂课（\o/）。但我被第三步挡住了。

我需要在我的类中添加一个方法（changeStatut），在“单击”按钮时使用 addEventListener 使用该类的其他方法（addToDOM()）创建。我不明白如何表示这一点。

我需要在第二种方法中使用“this”吗？但如何？

此按钮“单击”需要更改我的布尔值“完成”。

class Task {
    title;
    priority;
    done=false;

    constructor(title,priority){
        this.title=title;
        this.priority=priority;
    }

    addToDOM(){
    const tasklist = document.getElementById("tasks");
    const newTask = document.createElement("li");
    newTask.classList.add("task-item");

    const taskTitle = document.createElement("span");
    taskTitle.classList.add("task-title");
    taskTitle.textContent = `${this.title}`;

    const taskPriority = document.createElement("span");
    taskPriority.classList.add("task-priority");
    taskPriority.textContent = `${this.priority}`;
    taskPriority.classList.add(`task-priority--${this.priority}`);

    const taskButton = document.createElement("button");
    taskButton.classList.add("task-action");
    taskButton.textContent = "Changer le statut";

    tasklist.prepend(newTask);
    newTask.append(taskTitle,taskPriority,taskButton);

    }

    changeStatut(){

         let statut = this.done;
             statut = !statut;
             return statut;
        }

    }   

const task2 = new Task("Tailler la haie",3);
task2.addToDOM();

我尝试指向 DOM 的相同 ID。

Answer 1

我想你正在寻找类似的东西？

class Task
  {
  _tasklist = document.getElementById('tasks')
    ;
  constructor(title, priority) 
    {
    this.title    = title;
    this.priority = priority;
    this.done     = false;
    }
  addToDOM()
    {
    const
      newTask      = this._tasklist.appendChild( document.createElement('li') )
    , taskTitle    = newTask.appendChild( document.createElement('span'))
    , taskPriority = newTask.appendChild( document.createElement('span'))
    , taskButton   = newTask.appendChild( document.createElement('button'))
      ;
    newTask     .className = 'task-item';
    taskTitle   .className = 'task-title';
    taskPriority.className = `task-priority task-priority--${this.priority}`;
    taskButton  .className = 'task-action';    
    
    taskTitle   .textContent = this.title;
    taskPriority.textContent = this.priority;
    taskButton  .textContent = 'Changer le statut';

    taskButton.addEventListener('click', ()=>
      {
      this.done = !this.done;
      console.log( 'this.done :' , this.done )
      return this.done;
      });
  } }
  
const task2 = new Task('Tailler la haie', 3);
task2.addToDOM();

以下Peter Seliger的评论：

使用伪私有

_tasklist

而不是可用的真正私有

#tasklist

的原因是什么？

我意识到我错过了语言的这种良好的演变。 所以这是一个修复：

class Task
  {
  static #tasklist = document.getElementById('tasks')
    ;
  constructor(title, priority) 
    {
    this.title    = title;
    this.priority = priority;
    this.done     = false;

    this.#addToDOM();
    }
  #addToDOM()
    {
    const
      newTask  = Task.#tasklist.appendChild( document.createElement('li') )
    , title    = newTask.appendChild( document.createElement('span'))
    , priority = newTask.appendChild( document.createElement('span'))
    , status   = newTask.appendChild( document.createElement('span'))
    , doneBtn  = newTask.appendChild( document.createElement('button'))
      ;
    newTask  .className = 'task-item';
    title    .className = 'task-title';
    priority .className = `task-priority task-priority--${this.priority}`;
    doneBtn  .className = 'task-action';
    
    title    .textContent = this.title;
    priority .textContent = this.priority;
    status   .textContent = '...';
    doneBtn  .textContent = 'Changer le statut';

    doneBtn.addEventListener('click', ()=>
      {
      this.done    = !this.done;
      status.textContent  = this.done ? 'done' : '...';
      });
  } }
  
const
  task2 = new Task('Tailler la haie', 3)
, taskZ = new Task('éplucher les carottes', 15)
  ;

#tasks { list-style-type: none; }
#tasks li {
  width            : 33em;
  height           : 1.8em;
  margin           : .2em 0;
  }
#tasks li span {
  display : inline-block;
  padding : 0.4em 1em 0 1em;
  }
#tasks li span:first-of-type  { width: 14em; } 
#tasks li span:nth-of-type(2) { width: 3em;  text-align: right; } 

#tasks li button {  float: right; } 

 <ul id="tasks"></ul>