Добрый день, при вводе данных в поля next и title в таблице появляются с данными и две кнопки удалить и редактировать. При нажатии на удаление строка должна удалиться, мой код, который в самом низу скрипта не работает( помогите пожалуйста исправить ошибку(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<!-- Bootstrap styles -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
<!-- Font awesome -->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"
integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-light bg-light mb-5">
<span class="navbar-brand mb-0 h1">Todo app</span>
</nav>
<main>
<div class="form-section">
<div class="container">
<div class="row">
<div class="col-6 mx-auto form-col">
<div class="card card-body">
<form name="addTodoForm">
<div class="form-group">
<label for="title">Title</label>
<input
type="text"
name="title"
id="title"
class="form-control"
/>
</div>
<!-- /.form-group -->
<div class="form-group">
<label for="text">Text</label>
<input
type="text"
name="text"
id="text"
class="form-control"
/>
</div>
<!-- /.form-group -->
<button type="submit" class="btn btn-primary">
Add task
</button>
</form>
</div>
<!-- /.card card-body -->
</div>
<!-- /.col-6 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!-- /.form-section -->
<div class="todos-table mt-5">
<div class="container">
<div class="row">
<div class="col-8 mx-auto">
<table class="table table-bordered">
<thead>
<tr id="data">
<td>Title</td>
<td>Text</td>
<td>Controls</td>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<!-- /.col-8 mx-auto -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!-- /.todos-table -->
</main>
<!-- Scripts -->
<script src="js/app.js"></script>
</body>
</html>
[script]
(function() {
let storage = {
todos: []
};
const form = document.querySelector("form");
const title = document.querySelector("input#title");
const text = document.querySelector("input#text");
const table = document.querySelector("table");
form.addEventListener("submit", function(e) {
e.preventDefault();
if (!title.value || !text.value) return;
console.log("Введите text и title");
addNewTodoToStorage(generateId(), title.value, text.value);
form.reset();
});
/**
*
*/
function generateId() {
const words =
"0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASD FGHJKLZXCVBNM";
let id = "";
for (let char of words) {
let index = Math.floor(Math.random() * words.length);
id += words[index];
}
return id;
}
/**
*
* @param {*} title
* @param {*} text
*/
function addNewTodoToStorage(id, title, text) {
if (!title) return console.log("Введите заголовок задачи");
if (!text) return console.log("Введите текст задачи");
const newTask = {
title,
text,
id
};
storage.todos.push(newTask);
addNewTodoToView(newTask);
return storage.todos;
}
/**
*
* @param {*} id
*/
function deleteTodoFromStorage(id) {
if (!id) return console.log("Передайте id задачи");
const checkId = storage.todos.some(function(task, i) {
return task.id === id;
});
if (!checkId) return console.log("id несуществуе");
let removedTask;
for (let i = 0; i < storage.todos.length; i++) {
if (storage.todos[i].id === id) {
removedTask = storage.todos.splice(i, 1);
break;
}
}
return removedTask;
}
/**
*
* @param {*} id
* @param {*} title
* @param {*} text
*/
function editTaskStorage(id, title, text) {
deleteTodoFromStorage(id);
addNewTodoToStorage(id, title, text);
}
function addNewTodoToView(task) {
const template = todoTemplate(task);
table.insertAdjacentHTML("afterbegin", template);
}
function todoTemplate(task) {
return `<tr data-id='${task.id}'>
<td>${task.title}</td>
<td>${task.text}</td>
<td>
<i class="fas fa-trash"></i>
<i class="fas fa-edit"></i>
</td>
<tr>`;
}
//////////////////////////////////////
//let closeButton = document.createElement("i");
let closeButton = (document.className = "fas fa-trash");
console.log(data);
closeButton.onclick = function() {
data = document.getElementById(`${task.id}`);
closeButton.closest(data).remove();
};
})();
[/script]
