How do I simplify this onclick function code?-CodePudding

Just finished going through Head Start JavaScript Programming, figured I'd take a swing at building a "to-do" app from scratch. 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 >To-do List</h1>
        <div >
            <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 >
            <div >
                <h2>To-Do:</h2>
                <ul id="todo">
                    
                </ul>

            </div>
            
            <div >
                <h2>Category:</h2>
                <ul id="catdo">

                </ul>

            </div>
        </div>
        <div >
            <div >
                <h2>Completed</h2>
                <ul align="center">Checkbox and Log</p>

            </div>

        
    </body>
</html>

CodePudding user response：

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 .

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.

Finally you just append the new item before the end of the 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 >To-do List</h1>
        <div >
            <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 >
          <thead>
            <tr>
              <td>To Do:</td>
              <td>Category</td>
            </tr>
          </thead>
          <tbody >
            
          </tbody>
        </table>
        
        <div >
            <div >
                <h2>Completed</h2>
                <ul align="center">Checkbox and Log</p>

            </div>

        
    </body>
</html>