Question

我的按钮有问题。按钮不是从textarea保存我的文本，我也不知道为什么。我一切都已联网，应妥善保存文字。我尝试寻找一些错字。

Chrome中的控制台没有显示任何错误。我尝试检查一些拼写错误，但没有找到任何错别字。 VisualCode中的终端不会显示任何错误

let todoList = null;
let todoForm = null;
let todoSearch = null;

document.addEventListener('DOMContentLoaded', function() {
  todoList = document.querySelector('#todoList');
  todoForm = document.querySelector('#todoForm');
  todoSearch = document.querySelector('#todoSearch');

  todoForm.addEventListener('submit', function(e) {
    e.preventDefault();
    const textarea = this.querySelector('textarea');
    if (textarea.value !== ' ') {
      addTask(textarea.value);
      textarea.value = '';
    }
  });
});

function addTask(text) {
  const todo = document.createElement('div');
  todo.classList.add("task-element");

  const todoBar = document.createElement('div');
  todoBar.classList.add('task-bar');

  const todoDate = document.createElement('div');
  todoDate.classList.add('task-bar');
  const date = new Date();
  const dateText = date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getHours() + ':' + date.getMinutes();
  todoDate.inner = dateText;
  const todoDelete = document.createElement('button');
  todoDelete.classList.add('task-delete')
  todoDelete.classList.add('button')
  todoDelete.innerHTML = '<i class="fas fa-times-circle"></i>';

  todoBar.appendChild(todoDate);
  todoBar.appendChild(todoDelete);

  const todoText = document.createElement('div');
  todoText.classList.add('task-text');
  todoText.innerText = text;

  todo.appendChild(todoBar);
  todo.appendChild(todoText);

  todoList.append(todp);
}

document.addEventListener('DOMContentLoaded', function() {
  todoList.addEventListener('click', function(e) {
    console.log(e.target)
  });
});

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div class="todo-cnt">
    <form class="formquest" id="todoForm">
      <div class="firstplace">
        <label class="form-message" name="message" for="todoMessage"><p>Podaj treść zadania</p></label>
        <textarea class="input" id="input" id="todoMessage"></textarea>
    </form>
    </div>

    <div class="button-place">
      <button type="submit" class="button todo-form-button">Dodaj</button>
    </div>
    <section class="list-cnt">
      <header class="header-list">
        <h2 class="text-list">
          Lista Zadań
        </h2>
        <form class="list-form">
          <input type="search" id="todoSearch" class="search-form">
        </form>
      </header>
    </section>
    <div class="task-element">
      <div class="task-bar">
        <h3 class="task-date">60-80-2019 11:87</h3>
        <button class="task-delete" title="Usuń zadanie">
                    <i class="task-time"></i>
            </div>
            <div class="task-text" id="todoList">
                <p>Przykładowy tekst zadan dla tasku</p>
            </div>
        </div>
            <link rel="stylesheet"type="text/css"href="projekt2.css">
            <script src="projekt2.js" async defer></script>
        </body>
    </html>

Answer 1

表格外的按钮
其他按钮未关闭
表格反正在div的一半内错误关闭
todp拼写而不是todo

我在<i>中添加了文字，因为我没有加载fontawesome

let todoList = null;
let todoForm = null;
let todoSearch = null;

document.addEventListener('DOMContentLoaded', function() {
  todoList = document.querySelector('#todoList');
  todoForm = document.querySelector('#todoForm');
  todoSearch = document.querySelector('#todoSearch');

  todoForm.addEventListener('submit', function(e) {
    e.preventDefault();
    const textarea = this.querySelector('textarea');
    if (textarea.value !== ' ') {
      addTask(textarea.value);
      textarea.value = '';
    }
  });
});

function addTask(text) {
  const todo = document.createElement('div');
  todo.classList.add("task-element");

  const todoBar = document.createElement('div');
  todoBar.classList.add('task-bar');

  const todoDate = document.createElement('div');
  todoDate.classList.add('task-bar');
  const date = new Date();
  const dateText = date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getHours() + ':' + date.getMinutes();
  todoDate.inner = dateText;
  const todoDelete = document.createElement('button');
  todoDelete.classList.add('task-delete')
  todoDelete.classList.add('button')
  todoDelete.innerHTML = '<i class="fas fa-times-circle">°</i>';

  todoBar.appendChild(todoDate);
  todoBar.appendChild(todoDelete);

  const todoText = document.createElement('div');
  todoText.classList.add('task-text');
  todoText.innerText = text;

  todo.appendChild(todoBar);
  todo.appendChild(todoText);

  todoList.append(todo);
}

document.addEventListener('DOMContentLoaded', function() {
  todoList.addEventListener('click', function(e) {
    console.log(e.target)
  });
});

<form class="formquest" id="todoForm">
  <div class="todo-cnt">
    <div class="firstplace">
      <label class="form-message" name="message" for="todoMessage"><p>Podaj treść zadania</p></label>
      <textarea class="input" id="input" id="todoMessage"></textarea>
    </div>

    <div class="button-place">
      <button type="submit" class="button todo-form-button">Dodaj</button>
    </div>
    <section class="list-cnt">
      <header class="header-list">
        <h2 class="text-list">
          Lista Zadań
        </h2>
        <form class="list-form">
          <input type="search" id="todoSearch" class="search-form">
        </form>
      </header>
    </section>
    <div class="task-element">
      <div class="task-bar">
        <h3 class="task-date">60-80-2019 11:87</h3>
        <button class="task-delete" title="Usuń zadanie"><i class="task-time">Task time</i></button>
        <div class="task-text" id="todoList">
          <p>Przykładowy tekst zadan dla tasku</p>
        </div>
      </div>
    </div>
  </div>
</form>

Answer 2

应该可以在表单标签内放置一个提交按钮。

  <div class="todo-cnt">
    <form class="formquest" id="todoForm">
      <div class="firstplace">
        <label class="form-message" name="message" for="todoMessage"><p>Podaj treść zadania</p></label>
        <textarea class="input" id="input" id="todoMessage"></textarea>
        <div class="button-place">
          <button type="submit" class="button todo-form-button">Dodaj</button>
        </div>
    </form>
 </div>

Answer 3

在处理提交按钮时，请记住，必须确保提交按钮在您提交的表单内。

<form class="formquest" id="todoForm">
              <div class="firstplace">
                <label class="form-message" name="message" for="todoMessage"><p>Podaj treść zadania</p></label>
                <textarea class="input" id="input" id="todoMessage"></textarea>

            </div>

            <div class="button-place">
              <button type="submit" class="button todo-form-button">Dodaj</button>
            </div>
       </form>
            <section class="list-cnt">

我的提交按钮不保存文本区域中的文本

3 个答案: