英文:
ToDo list using classes
问题
以下是您要翻译的内容：
"大家好，我在使用JavaScript中的类制作待办事项列表时遇到了困难。这是我第一次使用面向对象编程，我不知道如何将所有内容连接起来以获得最佳结果。我在如何将输入传递给待办事项数组并在ul标记中设置它方面遇到了问题。
我的代码由两个类组成：
- List，我在其中向数组添加和删除元素，
- Render，我希望在其中显示已添加或已删除的元素。
有人可以帮助我吗？
class List {
#toDo = [];
constructor(render) {
this.render = render;
this.render.renderList(this.toDo);
}
addTask(list) {
this.toDo.push(list);
this.render.renderList(this.toDo.push(list));
}
removeTask(list) {
this.toDo = this.toDo.filter((word) => word !== list);
}
}
class Render {
constructor(input) {
this.input = input;
const task = this.input.querySelector("input");
const btn = this.input.querySelector("button");
const ul = this.input.querySelector(".tasks");
}
onRemoveTaskCallBack = () => {};
renderList(task) {
const li = document.createElement("li");
li.innerHTML = task + "<button>Delete</button>";
}
}
const render = new Render(document.querySelector("#to-do-container"));
const list = new List(render);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
margin: 80px auto;
text-align: center;
}
input {
width: 20%;
}
</style>
</head>
<body>
<div id="to-do-container">
<input type="text" />
<button>Add Task</button>
<ul class="tasks"></ul>
</div>
<script src="List.js"></script>
<script src="Render.js"></script>
</body>
</html>
请注意，代码中可能存在一些语法错误，需要根据您的需求进行修复。
英文:
Hi everyone I'm struggling with toDo list using classes in javascript. It's my first code using OOP and I don't know how to connect everything to obtain the best result. I have a problem with how to pass input to toDo array and set it in ul mark.
My code consist of two classes:
- List, where I add and remove elements from array and,
- Render where I would like to display element's added or removed.
Can anyone help me?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
class List {
#toDo = [];
constructor(render) {
this.render = render;
this.render.renderList(this.toDo);
}
addTask(list) {
this.toDo.push(list);
this.render.renderList(this.toDo.push(list));
}
removeTask(list) {
this.toDo.filter((word) => word != list);
}
}
class Render {
constructor(input) {
this.input = input;
const task = this.input.querySelector("input");
const btn = this.input.querySelector("button");
const ul = this.input.querySelector(".tasks");
}
onRemoveTaskCallBack = () => {};
renderList(task) {
const li = document.createElement("li");
li.innerHTML = task + "<button>Delete</button>";
}
}
const render = new Render(document.querySelector("#to-do-container"));
const list = new List(render);
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
margin: 80px auto;
text-align: center;
}
input {
width: 20%;
}
</style>
</head>
<body>
<div id="to-do-container">
<input type="text" />
<button>Add Task</button>
<ul class="tasks"></ul>
</div>
<script src="List.js"></script>
<script src="Render.js"></script>
</body>
</html>
<!-- end snippet -->
答案1
得分: 1
以下是您要翻译的代码部分：
class List {
toDo = [];
constructor(render) {
this.render = render;
this.render.renderList(this.toDo);
}
addTask(task) {
this.toDo.push(task);
this.render.renderList(this.toDo);
}
removeTask(task) {
this.toDo = this.toDo.filter((word) => word !== task);
this.render.renderList(this.toDo);
}
}
class Render {
constructor(input) {
this.input = input;
const taskInput = this.input.querySelector("input");
const addButton = this.input.querySelector("button");
const ul = this.input.querySelector(".tasks");
addButton.addEventListener("click", () => {
const task = taskInput.value.trim();
if (task !== "") {
list.addTask(task);
taskInput.value = "";
}
});
ul.addEventListener("click", (event) => {
if (event.target.tagName === "BUTTON") {
const task = event.target.previousSibling.textContent;
list.removeTask(task);
}
});
}
renderList(toDo) {
const ul = this.input.querySelector(".tasks");
ul.innerHTML = "";
toDo.forEach((task) => {
const li = document.createElement("li");
li.textContent = task;
const deleteButton = document.createElement("button");
deleteButton.textContent = "Delete";
li.appendChild(deleteButton);
ul.appendChild(li);
});
}
}
const render = new Render(document.querySelector("#to-do-container"));
const list = new List(render);
请注意，代码中的HTML部分没有被包含在您的请求中。如果您需要HTML部分的翻译，请提供HTML代码以便我进行翻译。
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
class List {
toDo = [];
constructor(render) {
this.render = render;
this.render.renderList(this.toDo);
}
addTask(task) {
this.toDo.push(task);
this.render.renderList(this.toDo);
}
removeTask(task) {
this.toDo = this.toDo.filter((word) => word !== task);
this.render.renderList(this.toDo);
}
}
class Render {
constructor(input) {
this.input = input;
const taskInput = this.input.querySelector("input");
const addButton = this.input.querySelector("button");
const ul = this.input.querySelector(".tasks");
addButton.addEventListener("click", () => {
const task = taskInput.value.trim();
if (task !== "") {
list.addTask(task);
taskInput.value = "";
}
});
ul.addEventListener("click", (event) => {
if (event.target.tagName === "BUTTON") {
const task = event.target.previousSibling.textContent;
list.removeTask(task);
}
});
}
renderList(toDo) {
const ul = this.input.querySelector(".tasks");
ul.innerHTML = "";
toDo.forEach((task) => {
const li = document.createElement("li");
li.textContent = task;
const deleteButton = document.createElement("button");
deleteButton.textContent = "Delete";
li.appendChild(deleteButton);
ul.appendChild(li);
});
}
}
const render = new Render(document.querySelector("#to-do-container"));
const list = new List(render);
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
margin: 80px auto;
text-align: center;
}
input {
width: 20%;
}
</style>
</head>
<body>
<div id="to-do-container">
<input type="text" />
<button>Add Task</button>
<ul class="tasks"></ul>
</div>
<script src="List.js"></script>
<script src="Render.js"></script>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论