html在输入框内输入内容,点击提交按钮后,把输入内容显示在输入框下面,每次提交都会显示之前的内容。且带有清空按钮
时间: 2024-03-22 18:37:53 浏览: 12
好的,这个问题可以通过以下的HTML和JavaScript代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>输入框内容提交显示</title>
</head>
<body>
<input type="text" id="inputBox"><br>
<button onclick="submit()">提交</button>
<button onclick="clearContent()">清空</button>
<div id="content"></div>
<script>
var contentList = [];
function submit() {
var inputBox = document.getElementById("inputBox");
var contentDiv = document.getElementById("content");
var inputContent = inputBox.value;
inputBox.value = "";
contentList.push(inputContent);
contentDiv.innerHTML = "";
for (var i = 0; i < contentList.length; i++) {
contentDiv.innerHTML += contentList[i] + "<br>";
}
}
function clearContent() {
contentList = [];
document.getElementById("content").innerHTML = "";
}
</script>
</body>
</html>
```
这段代码中,我们使用了一个数组 `contentList` 来存储提交的内容,并在每次提交后将内容添加到数组中。同时,我们也在每次提交后通过遍历数组来更新显示内容的 `div` 元素。清空按钮则是通过将数组清空并重置 `div` 中的内容来实现的。