如何简化这个 onclick 函数代码？

Question

刚刚完成了 Head Start JavaScript 编程，我想我会从头开始构建一个“待办事项”应用程序。我已经设法让以下代码“正确”执行，但它显然是超级重复的。我的意图是将输入字段和下拉列表中的文本一起记录在“待办事项”列表中。输入字段是任务，下拉菜单提供 category/priority 级别。所有 suggestions/corrections 将不胜感激。

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>

Answer 1

您可以尝试这样的操作：

用 table 替换您的列表，这允许您以两种方式利用 table 结构。 1. 轻松对齐能力和 2. 访问标题和 body .

接下来创建一个 onclick 函数，它首先像之前一样捕获值，然后创建一个 newItem，它只是一个具有正确 table 结构的模板文字，并使用您刚刚保存的值。

最后，您只需在 table body 结束前追加新项目。

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>

如何简化这个 onclick 函数代码？

How do I simplify this onclick function code?

html

javascript

onclick