如何簡化這個onclick函式代碼？-有解無憂

剛完成Head Start JavaScript Programming，我想我會嘗試從頭開始構建一個“待辦事項”應用程式。我設法讓以下代碼“正確”執行，但它顯然是超級重復的。我的意圖是將輸入欄位和下拉串列中的文本一起記錄在“待辦事項”串列中。輸入欄位是任務，下拉選單提供類別/優先級。所有建議/更正將不勝感激。

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>

uj5u.com熱心網友回復：

你可以嘗試這樣的事情：

用表格替換您的串列，這允許您以兩種方式利用表格結構。1. 易于對齊的能力和 2. 訪問標題和正文。

接下來創建一個 onclick 函式，它首先像以前一樣捕獲值，然后創建一個 newItem，它只是一個具有正確表結構的模板文字，并使用您剛剛保存的值。

最后，您只需在表體末尾附加新專案。

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/410093.html

標籤：

上一篇：如何在此按鈕上放置一個簡單的過渡？

下一篇：如何在電子郵件中為有序串列項編號添加前綴？