时间戳

首页 > 解决方案 > 我的提交按钮不保存来自 textarea 的文本

javascript - 我的提交按钮不保存来自 textarea 的文本

问题描述

我的按钮有问题。按钮没有从 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>

标签： javascripthtmlcssdomevents

解决方案

  1. 表单外的按钮
  2. 其他按钮未关闭
  3. 无论如何，表格在div内错误地关闭了一半
  4. 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>

推荐阅读