如何简化此 onclick function 代码？
[英]How do I simplify this onclick function code?
问题描述
Just finished going through Head Start JavaScript Programming, figured I'd take a swing at building a "to-do" app from scratch.
刚刚完成 Head Start JavaScript 编程，我想我会在从头开始构建“待办事项”应用程序时使用 swing。 I've managed to get the following code to perform "correctly", but it is obviously super repetitive.我设法让以下代码“正确”执行，但它显然是超级重复的。 My intention is to have text from an input field and dropdown to be logged together in a "to-do" list.我的意图是将输入字段和下拉列表中的文本一起记录在“待办事项”列表中。 Input field being the task and the dropdown providing a category/priority level.输入字段是任务，下拉菜单提供类别/优先级。 All suggestions/corrections would be deeply appreciated.所有建议/更正将不胜感激。
function submitTo(){ var element = document.createElement("OL"); var input = document.getElementById("todotext").value; var text = document.createTextNode(input); element.appendChild(text); document.getElementById("todo").appendChild(element); createCategory(); }; function createCategory(){ var element = document.createElement("OL"); const selection = document.getElementById("catdropdown"); var option = selection.options[selection.selectedIndex].value; var text = document.createTextNode(option); element.appendChild(text); document.getElementById("catdo").appendChild(element); };
body { min-width: 650px; } div.form { width: auto; margin: auto; padding: 10px; text-align: center; } label { margin: 10px; } h1.title { color: saddlebrown; width: auto; margin: auto; padding: 25px; text-align: center; } div.list{ display: table; width: auto; margin: auto; padding: 25px; } div.column{ display: table-cell; text-align: center; width: 200px; padding: 10x; margin: 0px 10px 10px 0px; } div.column ul { text-align: left; padding: 0px; }
<.DOCTYPE html> <html> <head> <title>To-Do List</title> <meta charset="en"> <link rel="stylesheet" href="main.css"> <script src="main:js"></script> </head> <body> <h1 class="title">To-do List</h1> <div class="form"> <label> <input type="text" id="todotext"> </label> <label> <select name="dropdown" id="catdropdown"> <option value="" selected>Choose a category</option> <option value="Work">Work</option> <option value="House">House</option> <option value="Honey-Do">Honey-Do</option> </select> </label> <label> <button type="submit" onclick="submitTo()">Submit</button> </label> </div> <div class="list"> <div class="column"> <h2>To-Do:</h2> <ul id="todo"> </ul> </div> <div class="column"> <h2>Category:</h2> <ul id="catdo"> </ul> </div> </div> <div class="list"> <div class="column"> <h2>Completed</h2> <ul align="center">Checkbox and Log</p> </div> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2022-01-13 16:03:00
You could try something like this:你可以尝试这样的事情：
Replace your lists with a table, this allows you to utilize the table structure in two ways.用表格替换您的列表，这允许您以两种方式利用表格结构。 1. easy alignment ability and 2. access to a heading and a body. 1. 容易 alignment 能力和 2. 获得一个标题和一个身体。
Next create an onclick function that that first captures the values just like you have before then creates a newItem that is a just a template literal with the proper table structure and uses the values you just saved.接下来创建一个 onclick function ，它首先像以前一样捕获值，然后创建一个 newItem ，它只是一个具有适当表结构的模板文字，并使用您刚刚保存的值。
Finally you just append the new item before the end of the table body.最后，您只需将 append 新项目放在表体的末尾。
const submitBtn = document.getElementById("submit-btn"); submitBtn.addEventListener("click", function() { let input = document.getElementById("todotext").value, selection = document.getElementById("catdropdown"), option = selection.options[selection.selectedIndex].value, newItem = ` <tr> <td>${input}</td> <td>${option}</td> </tr> `; document.querySelector(".main-body").insertAdjacentHTML("beforeend", newItem); });
body { min-width: 650px; } div.form { width: auto; margin: auto; padding: 10px; text-align: center; } label { margin: 10px; } h1.title { color: saddlebrown; width: auto; margin: auto; padding: 25px; text-align: center; } div.list{ display: table; width: auto; margin: auto; padding: 25px; } div.column{ display: table-cell; text-align: center; width: 200px; padding: 10x; margin: 0px 10px 10px 0px; } div.column ul { text-align: left; padding: 0px; }.main-table { width: 50%; margin: 0 auto; }.main-table thead, .main-table tbody { text-align: center; }
<.DOCTYPE html> <html> <head> <title>To-Do List</title> <meta charset="en"> <link rel="stylesheet" href="main.css"> <script src="main:js"></script> </head> <body> <h1 class="title">To-do List</h1> <div class="form"> <label> <input type="text" id="todotext"> </label> <label> <select name="dropdown" id="catdropdown"> <option value="" selected>Choose a category</option> <option value="Work">Work</option> <option value="House">House</option> <option value="Honey-Do">Honey-Do</option> </select> </label> <label> <button id="submit-btn" type="submit">Submit</button> </label> </div> <table class="main-table"> <thead> <tr> <td>To Do:</td> <td>Category</td> </tr> </thead> <tbody class="main-body"> </tbody> </table> <div class="list"> <div class="column"> <h2>Completed</h2> <ul align="center">Checkbox and Log</p> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.