gpt4 book ai didi

javascript - 删除表单元素并在其位置放置一个具有唯一 id 的 div?

转载 作者:行者123 更新时间:2023-11-28 04:56:35 24 4
gpt4 key购买 nike

我的老师这句话到底是什么意思?我对 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>

最佳答案

由于表单不再可用,您需要将事件从 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>

关于javascript - 删除表单元素并在其位置放置一个具有唯一 id 的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42500915/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com