如何在javascript函数中添加任务？

Question

我有一个HTML/JS如下所示的代码，在单击“执行”按钮时，我想显示：

[{"detail":"Hello World"},{"detail":"Great News"}]

目前，单击“执行”按钮后，我得到以下信息：

[{"detail":""},{"detail":""}]

我想知道我需要在下面的 JS 代码中进行哪些更改，以便单击“执行”按钮时，我能够显示：

[{"detail":"Hello World"},{"detail":"Great News"}] 

HTML：

 <input type="submit" onClick="runCode()" value="Execute" >

 <div id="console-log">

 </div>

JavaScript：

$(document).ready(function() { 

})

function runCode(){

var td=new Todo()

td.addTask("Hello World")

td.addTask("Great News")

td.printList()

}

class Todo{

    constructor(name) {

        this.todolist = [];

        

        

        this.task={

            'detail':''

        }

      }

    

    addToList(newobj)

    {

        this.todolist.push(newobj)

     

    }

    addTask(taskDetail){

    

                    this.task.detail=taskDetail

            this.todolist.push(this.task)

            this.task.detail='' //clear data for next step

    

    }

    printList()

    {

            var consoleLine = "<p class=\"console-line\"></p>";

            var text= JSON.stringify(this.todolist)

         $("#console-log").append($(consoleLine).html(text));

        //alert(this.todolist)

    }

}

Answer 1

将仅从参数创建的对象推入属性todolist：addTask(detail) {   this.todolist.push({ detail }); }该this.task属性只会让事情变得更加混乱，我建议避免它。function runCode() {  var td = new Todo()  td.addTask("Hello World")  td.addTask("Great News")  td.printList()}class Todo {  constructor(name) {    this.todolist = [];  }  addTask(detail) {    this.todolist.push({ detail });  }  printList() {    var consoleLine = "<p class=\"console-line\"></p>";    var text = JSON.stringify(this.todolist)    $("#console-log").append($(consoleLine).html(text))  }}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input type="submit" onClick="runCode()" value="Execute"><div id="console-log"></div>如果您愿意的话，删除对大型 jQuery 库的依赖也很简单，它没有完成任何有用的事情。另外，使用addEventListener而不是内联处理程序是一个很好的做法：document.querySelector('input').addEventListener('click', () => {  var td = new Todo()  td.addTask("Hello World")  td.addTask("Great News")  td.printList()});class Todo {  constructor(name) {    this.todolist = [];  }  addTask(detail) {    this.todolist.push({ detail });  }  printList() {    document.querySelector('code').appendChild(document.createElement('p'))      .textContent = JSON.stringify(this.todolist);  }}<input type="submit" value="Execute"><code></code>