使用 jQuery：在单击按钮时将输入添加到列表

Question

此代码设置了一个简单的待办事项列表界面，其中包含一个用于添加新待办事项的输入框和一个用于提交它们的按钮。它使用 jQuery 来处理 DOM 操作和事件处理。 renderTodos 函数负责在屏幕上显示待办事项，而 $('#addTodoBtn').on('click', ...) 事件侦听器会在单击按钮时将新的待办事项添加到列表中。

我正在尝试创建一个函数，该函数将从输入框中获取输入，然后将其作为额外的内容添加到无序列表中

使用 jQuery 创建输入和按钮。单击按钮时，它应该调用函数 addToList，该函数将使用输入的值将其添加到 toDos 变量中。确保将其呈现在屏幕上作为无序列表中的新列表项。

const body = $("body");
const header = $("<header>Todo List</header>");
const unorderedList = $("<ul>unorderedlist</ul>");
const testButton = $("<button>testButton</button>")
const inputBox = $("<input></input>")
var toDos = ["wake up", "eat breakfast", "code"];


$("<ul>")
  .append(toDos.map((text) => $("<li>", { text })))
  .appendTo(document.body);

testButton.on("click", () => {
    console.log("hello");
 .append(inputBox.text) => $("<li>", { text })
 .appendTo(document.body);
});


  body.append(header);
  body.append(unorderedList);
  body.append(inputBox);
  body.append(testButton);

Answer 1

您遇到了几个问题，我已经解决了：

const body = $("body");
const header = $("<header>Todo List</header>");
const unorderedList = $("<ul></ul>");
const testButton = $("<button>testButton</button>")
const inputBox = $("<input></input>")
var toDos = ["wake up", "eat breakfast", "code"];

// Add toDos to the <ul>
unorderedList.append(toDos.map((text) => $("<li>", { text })))

// Add click handler to button:
testButton.on("click", () => {
    console.log("hello");
    unorderedList.append($("<li>", { text: inputBox.val() }))
});

body.append(header);
body.append(unorderedList);
body.append(inputBox);
body.append(testButton);