javascript appendChild显示列表项然后使其消失

Question

<div id="task-list"> <!-- Table that show tasks -->
            <ul id="list"> <!--Blank table that uses JavaScript to add tasks -->
            </ul>

            <input type="image" src="image/plus.svg" class="add-btn-hidden" onclick="addButton()" >
        </div>

<div id="hidden-add-form">

            <form>
                <h2 id="form-header">Add New Task</h2>
                <button id="cancel" onclick="cancelButton()">X</button>
                <br>Name<br>
                <input type="text" id="task-name"><br>
                <div class="same-line-input">
                <span id="place">Place</span> <span id="department">Department</span><br>
                <input type="text" id="task-place">
                <select id="select">
                    <option value="Blank"></option>
                    <option value="Cleanning">Cleaning</option>
                    <option value="Kitchen">Kitchen</option>
                    <option value="Receptionist">Receptionist</option>
                    <option value="Beltboy">Bellboy</option>
                    <option value="All">All</option>
                </select><br>
                </div>
                Description<br>
                <textarea rows="10" cols="50" id="description"></textarea><br>
                <input type="radio" name="urgent" value="other" id="urgent-btn"> Urgent<br>
                Attachment:<br><input type="file" name="fileToUpload" id="fileToUpload"><br>
                <input type="submit" id="form-submit" onclick="addTask ()">
            </form>

        </div>

使用Javascript：

    function addButton (){
        document.getElementById("hidden-add-form").style.visibility = "visible";
    };

    function cancelButton(){
        document.getElementById("hidden-add-form").style.visibility= "hidden";
    };

    function addTask (){
        let ul = document.getElementById("list");
    let name = document.getElementById("task-name");
    let place = document.getElementById("task-place");
    let department = document.getElementById("select");
    let description = document.getElementById("description");

    let nameValue = "Name: " + name.value;

    let li = document.createElement("li")
    li.setAttribute("id", "task-on-list");
    li.appendChild(document.createTextNode(nameValue));
    ul.appendChild(li);    
};

函数addButton（）和cancelButton（）工作正常，但addTask（）函数显示新的列表项真实快速，然后列表项消失。我想传递表单中的信息，以便在无序列表的列表项中显示它。 nameValue只是我实验的一部分