时间戳

首页 > 解决方案 > 为什么我不能添加任务并将其呈现到列表中？

javascript - 为什么我不能添加任务并将其呈现到列表中？

问题描述

下面是代码，其中“卡片内容”部分有一个表单来添加类和删除图标以删除任务。

当我尝试添加将值添加到表单的任务并单击提交时。该任务未添加到 DOM。Javascript 和 HTML 代码供参考。

应用程序.js

function change(){
      var li = document.createElement("LI");
      var inputValue = document.getElementsByClassName("btn").value;
      var t = document.createTextNode(inputValue);
      li.appendChild(t);
      if (inputValue === ''){
          alert("Please input a task");
      }else{
          document.getElementsByClassName("collection").appendChild(li);
      }
      document.getElementsByClassName("btn").value = "";
      
      var span = document.createElement("SPAN");
      var txt = document.createTextNode("\u00D7");
      span.className = "close";
      span.appendChild(txt);
      li.appendChild(span);
      
      for(var k = 0;k < close.length;k++){
        close[k].onclick = function(){
            var div = this.parentElement;
            div.style.display = "none";
        }
    }

    var myNodeList = document.getElementsByTagName("LI");
    for(var i = 0;i < myNodeList.length;i++){
        var span = document.createElement("SPAN");
        var txt = document.createTextNode("\u00D7");
        span.className = "close";
        span.appendChild(txt);
        myNodeList[i].appendChild(span);
    }

    var close = document.getElementsByClassName("fa fa-remove");
    for(var j = 0;j < close.length;j++){
        close[j].onclick = function(){
            var div = this.parentElement;
            div.style.display = "none";
        }
    }
}

HTML 文件以根据用户输入将任务添加到列表中。indes.html

<!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">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
      <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
        crossorigin="anonymous">
      <title>Task List</title>
      <style>
        .red{
          color:red;
        }
        .blue{
          color:blue;
        }
      </style>
    </head>

    <body>
      <div class="container">
        <div class="row">
          <div class="col s12">
            <div id="main" class="card">
              <div class="card-content">
                <span class="card-title">Task List TEST</span>
                <div class="row">
                    <div class="input-field col s12">
                      <input type="text" name="task" id="task">
                      <label for="task">New Task</label>
                    </div>
                </div>
                <input type="submit" onclick="change()" value="Add Task" class="btn">
              </div>
              <div class="card-action">
                <h5 id="task-title">Tasks</h5>
                <ul class="collection">
                  <li class="collection-item">
                    List Item
                    <a href="#" class="delete-item secondary-content">
                      <i class="fa fa-remove"></i>
                    </a>
                  </li> 
                  <li class="collection-item">
                    List Item
                    <a href="#" class="delete-item secondary-content">
                      <i class="fa fa-remove"></i>
                    </a>
                  </li> 
                  <li class="collection-item">
                    List Item
                    <a href="#" class="delete-item secondary-content">
                      <i class="fa fa-remove"></i>
                    </a>
                  </li>
                  <li class="collection-item">
                    List Item
                    <a href="#" class="delete-item secondary-content">
                      <i class="fa fa-remove"></i>
                    </a>
                  </li>
                  <li class="collection-item">
                    List Item
                    <a href="#" class="delete-item secondary-content">
                      <i class="fa fa-remove"></i>
                    </a>
                  </li>
              
                </ul>
                <a class="clear-tasks btn black" href="">Clear Tasks</a>
                <button onclick="change()" class="test">Change</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
      <script src="app.js"></script>//The Javascript being used//

    </body>

    </html>

标签： javascripthtmldom

解决方案

由于您使用的是“getElementsByClassName”函数，因此您需要指定确切的索引位置，请参阅下文

document.getElementsByClassName("collection")[0].appendChild(li);

推荐阅读