gpt4 book ai didi

JavaScript - DOM 操作 - 单击提交按钮后尝试创建
  • 元素
  • 转载 作者:行者123 更新时间:2023-11-30 13:52:59 35 4
    gpt4 key购买 nike

    如标题所述,我正在尝试创建本质上是待办事项列表的内容。在我了解更多关于 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 元素,并创建一个列表。我怎样才能让它正常工作?

    最佳答案

    <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>

    关于JavaScript - DOM 操作 - 单击提交按钮后尝试创建 <li> 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57863453/

    35 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com