时间戳

首页 > 解决方案 > JavaScript - DOM 操作 - 试图创建一个

  • 单击提交按钮后的元素

    • javascript - JavaScript - DOM 操作 - 试图创建一个
  • 单击提交按钮后的元素

    • 问题描述

    正如标题所述，我正在尝试创建本质上是一个待办事项列表。在我了解更多关于 js 的知识之前，它不会很花哨，所以这就是我目前所拥有的一切：

    <!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="style.css">
<title>Todo-List</title>
</head>
<body>
<div id="container">
  <header>
    <h2>To-Do List</h2>
  </header>
  <form>
    <input id="textArea" type="text" placeholder="Enter list item here!"><input id="submit" type="submit" value="Add">
  </form>
</div>
<div id="tasks-div">
  <ul id="tasks-list"></ul>
</div>
<script src="script.js"></script>
</body>
</html>


let textArea = document.getElementById("textArea");
let submit = document.getElementById("submit");
let ul = document.querySelector("ul");
let li = document.createElement("li");

//add todos
submit.addEventListener("click", function(){
 let value = textArea.value;
 ul.appendChild(li);
 li.textContent = value; 
});

    理想情况下，我希望提交功能从 textArea 中获取值，将 textArea 的内容附加到 li 元素，然后创建一个列表。我怎样才能让它正常工作？

    标签： javascripthtmldom

    解决方案

    <textarea id="textArea">
  This text will be copied in a list item
</textarea>
<ul id="uoList">

</ul>
<button id="addToList">
   Add list item
</button>

<script>
    var textArea = document.getElementById("textArea");
    var addToList = document.getElementById("addToList");
    var uoList = document.getElementById("uoList");
    addToList.addEventListener('click', function() {
        var li = document.createElement('li');
        li.innerText = textArea.value;
        uoList.appendChild(li)
    })
</script>

    推荐阅读