JavaScript 待办事项列表 - 当我单击“编辑”按钮时，它不显示能够更改待办事项的输入

Question

I'm building a todo list in vanilla JavaScript as a part of the exercise.作为练习的一部分，我正在用 vanilla JavaScript 构建一个待办事项列表。 I'm trying to get the 'edit' option to function properly.我正在尝试使“编辑”选项正常运行。 When I click the 'edit' button, the corresponding text input should be enabled, and auto-selected, then the user should be able to press 'enter' to submit changes.当我单击“编辑”按钮时，应启用相应的文本输入并自动选择，然后用户应该能够按“输入”提交更改。

The problem is that I cannot make Edit functional.问题是我无法使 Edit 起作用。 Two of the other buttons are working well.其他两个按钮运行良好。

I know that there is similar question allready, and I have tried what was in that question, and still cannot get it done.我知道已经有类似的问题了，我已经尝试过该问题中的内容，但仍然无法完成。 Please help guys.请帮助伙计们。

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>

    <header>
      <h1>To-do List</h1>
    </header>

      <input type="text" id="addTodoTextInput" onkeyup="todoButtons.addTodo()" placeholder="Add new todo" maxlength="80" autofocus>

    <div>
      <button onclick="todoButtons.toggleAll()">Toggle All</button>
      <button onclick="todoButtons.deleteAll()">Delete All</button>
    </div>

      <ol>
      </ol>

    <script src="script.js"></script>

  </body>

</html>

css css

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #eee; /* Lightblue */
  font-family: tahoma, sans-serif;
}

h1 {
  font-weight: 100;
  color: brown;
}

ol {
  list-style-type: none;
  padding-left: 0;
  min-width: 30%;
}

li {
  padding: 10px;
  border-radius: 8px;
  background-color: white;
  box-shadow: 0 10px 50px black;
  margin-top: 10px;
  transition: all .3s ease;
  overflow: hidden;
}

li:hover {
  box-shadow: 0 10px 50px 3px black;
}

li button {
  float: right;
}

button {
  background-color: #bbb; /* Darkgrey */
  font-weight: bold;
  border-radius: 5px;
  padding: 5px;
  transition: all .3s ease;
  cursor: pointer;
}

button:hover {
  background-color: #d8d2d2; /* Grey */
  color: brown;
}

/* Input for adding new todos */
#addTodoTextInput {
  width: 30%;
  margin-bottom: 20px;
}

js js

var todoButtons = {
  todos: [],
  addTodo: function(e) {
    // When Enter is pressed, new todo is made
    if (e.keyCode === 13) {
      var addTodoTextInput = document.getElementById('addTodoTextInput');
      this.todos.push({
      todoText: addTodoTextInput.value,
      completed: false
    });
      // Reseting value after user input
      addTodoTextInput.value = '';
      todoView.displayTodos();
    }
  },
  changeTodo: function(position, newTodoText) {
        this.todos[position].todoText = newTodoText;
        todoView.displayTodos();
    },
  deleteTodo: function(position) {
    this.todos.splice(position, 1);
    todoView.displayTodos();
  },
  toggleCompleted: function (position) {
    var todo = this.todos[position];
    todo.completed = !todo.completed;
    todoView.displayTodos();
  },
  toggleAll: function() {
    var totalTodos = this.todos.length;
    var completedTodos = 0;

    // Checks for a number of completed todos
    this.todos.forEach(function(todo) {
      if (todo.completed === true) {
        completedTodos++;
      }
    });
    this.todos.forEach(function(todo) {
      // If all todos are true, they will be changed to false
      if (completedTodos === totalTodos) {
        todo.completed = false;
      }
      // Otherwise, they will be changed to true
      else {
        todo.completed = true;
      }
    });
    todoView.displayTodos();
  },
  deleteAll: function() {
    this.todos.splice(0, this.todos.length);
    todoView.displayTodos();
  }
};

// Function for displaying todos on the webpage
var todoView = {
  displayTodos: function() {
    var todosUl = document.querySelector('ol');
    todosUl.innerHTML = '';

    // Creating list element for every new todo
    for (var i = 0; i < todoButtons.todos.length; i++) {
      var todoLi = document.createElement('li');
      var todoLiText = document.createElement('input');
      todoLiText.type = "text";
      todoLiText.disabled = true;
      todoLiText.id = 'textInput';
      var todoTextWithCompletion = todoButtons.todos[i].todoText;

      if (todoButtons.todos[i].completed === true) {
        todoLi.style.textDecoration = "line-through";
        todoLi.style.opacity = "0.4";
        todoLi.textContent = todoButtons.todoText + ' ';
      }
      else {
        todoLi.textContent = todoButtons.todoText + ' ';
      }
      todoLi.id = i;
      todoLiText.value = todoTextWithCompletion;
      todoLi.appendChild(this.createDeleteButton());
      todoLi.appendChild(this.createToggleButton());
      todoLi.appendChild(this.createEditButton());
      todoLi.appendChild(todoLiText);
      todosUl.appendChild(todoLi);
    };
  },
  // Method for creating Delete button for each todo
  createDeleteButton: function() {
    var deleteButton = document.createElement('button');
    deleteButton.textContent = 'Delete';
    deleteButton.className = 'deleteButton';
    return deleteButton;
  },
  // Method for creating Toggle button for each todo
  createToggleButton: function() {
    var toggleButton = document.createElement('button');
    toggleButton.textContent = 'Toggle';
    toggleButton.className = 'toggleButton';
    return toggleButton;
  },
  // Method for creating Edit button for each todo
  createEditButton: function() {
    var editButton = document.createElement('button');
    editButton.textContent = 'Edit';
    editButton.className = 'editButton';
    return editButton;
  },
  // Event listeners gor the Delete, Edit and Toggle buttons
  setUpEventListeners: function() {
    var todosUl = document.querySelector('ol');
    todosUl.addEventListener('click', function(event) {
      var position = event.target.parentNode.id;
      var elementClicked = event.target.className;

      if (elementClicked === 'deleteButton') {
        // Path to the ID of each created todo
        todoButtons.deleteTodo(parseInt(position));
      }
    });
    todosUl.addEventListener('click', function(event) {
      var position = event.target.parentNode.id;
      var elementClicked = event.target.className;

      if (elementClicked === 'toggleButton') {
        todoButtons.toggleCompleted(parseInt(position));
      }
    });
    todosUl.addEventListener('click', function(event) {
            var position = event.target.parentNode.id;
      var elementClicked = event.target.className;

            if (elementClicked === 'edit') {
                var input = document.getElementById(position).childNodes[0];

                input.disabled = false;
                input.className = "activeTextInput";
        input.focus();
        input.select();

        input.addEventListener('keyup', function(event) {
                    if(event.keyCode === 13) {
                        var textInput = input.value;
                        input.disabled = true;
                        input.classList.remove("activeTextInput");
                        todoButtons.changeTodo(position, textInput);
                    };
                });
            };
        });
  }
};
// Starting event listeners when the app starts
todoView.setUpEventListeners();

Answer 1

So, I looked at the code.所以，我查看了代码。 The first problem is the condition:第一个问题是条件：

if (elementClicked === 'edit') {

It should be:它应该是：

if (elementClicked === 'editButton') {

The second problem was:第二个问题是：

if (elementClicked === 'edit') {
                var input = document.getElementById(position).childNodes[0]; //this line

                input.disabled = false;
                input.className = "activeTextInput";

It should be var input = document.getElementById(position).querySelector('input');它应该是var input = document.getElementById(position).querySelector('input'); to get the correct element.以获得正确的元素。

https://jsfiddle.net/nh9j6yw3/1/ https://jsfiddle.net/nh9j6yw3/1/

Reason for "undefined" : “未定义”的原因：
on line todoLi.textContent = todoButtons.todoText + ' ';在线todoLi.textContent = todoButtons.todoText + ' ';
todoButtons.todoText is undefined . todoButtons.todoText是undefined 。

JavaScript 待办事项列表 - 当我单击“编辑”按钮时，它不显示能够更改待办事项的输入

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-12-22 11:40:46

JavaScript 待办事项列表 - 当我单击“编辑”按钮时，它不显示能够更改待办事项的输入

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-12-22 11:40:46

解决方案1
0 已采纳 2018-12-22 11:40:46