删除表单元素并在其位置放置一个具有唯一 ID 的 div？答案

【问题标题】：Remove the form element and in its place put a div with a unique id?删除表单元素并在其位置放置一个具有唯一 ID 的 div？
【发布时间】：2017-02-28 13:43:58
【问题描述】：

我的老师到底是什么意思？我对 HTML 的经验很少，所以我不知道该怎么办？如果没有表单元素，它不会停止工作吗？整个说明说： " 删除表单元素，并在其位置放置一个具有唯一 ID 的 div。不要忘记关闭 div 元素。 为删除任务添加第二个按钮。将两个按钮的“提交”类型更改为“按钮”并给出每一个都有一个唯一的 id。”

(function(){
    
	// Variable that stores the tasks:
    var tasks = []; 

	// Function called when the form is submitted.
	// Function adds a task to the global array.
    function addTask() {
        'use strict';
        var task = document.getElementById('task');
        var output = document.getElementById('output');
        var message = '';

        if (task.value) {
            tasks.push(task.value);
            message = '<h2>To-Do</h2><ol>';
            for (var i = 0, count = tasks.length; i < count; i++) {
                message += '<li>' + tasks[i] + '</li>';
            }
            message += '</ol>';
            output.innerHTML = message;        
        } // End of task.value IF.

	    // Return false to prevent submission:
        return false;

    } // End of addTask() function.

    // Initial setup:
    function init() {
        'use strict';
        document.getElementById('theForm').onsubmit = addTask;
    } // End of init() function.
    window.onload = init;

})();

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>To-Do List</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="css/form.css">
</head>
<body>
    <!-- Script 6.5 - task.html -->
    <form action="#" method="post" id="theForm">
        <fieldset><legend>Enter an Item To Be Done</legend>
            <div><label for="task">Task</label><input type="text" name="task" id="task" required></div>
            <input type="submit" value="Add It!" id="submit">
		    <div id="output"></div>
        </fieldset>
    </form>
    <script src="js/todo.js"></script>
</body>
</html>

【问题讨论】：

分享js/todo.js的代码

标签： javascript html

【解决方案1】：

由于表单不再可用，因此您需要将事件从 onsubmit 更改为 on click。

试试这个：

(function(){
    
	// Variable that stores the tasks:
    var tasks = []; 

	// Function called when the form is submitted.
	// Function adds a task to the global array.
    function addTask() {
        'use strict';
        var task = document.getElementById('task');
        var output = document.getElementById('output');
        var message = '';

        if (task.value) {
            tasks.push(task.value);
            message = '<h2>To-Do</h2><ol>';
            for (var i = 0, count = tasks.length; i < count; i++) {
                message += '<li>' + tasks[i] + '</li>';
            }
            message += '</ol>';
            output.innerHTML = message;        
        } // End of task.value IF.

	    // Return false to prevent submission:
        return false;

    } // End of addTask() function.

    // Initial setup:
    function init() {
        'use strict';
        document.getElementById('submit').onclick = addTask;
    } // End of init() function.
    window.onload = init;

})();

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>To-Do List</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="css/form.css">
</head>
<body>
    <!-- Script 6.5 - task.html -->
    <form action="#" method="post" id="theForm"
        <fieldset><legend>Enter an Item To Be Done</legend>
            <div><label for="task">Task</label><input type="text" name="task" id="task" required></div>
            <input type="submit" value="Add It!" id="submit">
		    <div id="output"></div>
        </fieldset>
   </form>
    <script src="js/todo.js"></script>
</body>
</html>

【讨论】：

等一下，原来只是在j.s代码中做了改动？
是的，onsubmit 事件仅在表单元素中可用，因此您需要使用按钮的单击事件来更改它。