点击按钮将表单内容传递给列表显示JS方法
时间: 2023-07-29 10:10:07 浏览: 111
您可以使用以下代码将表单内容传递给列表显示的 JavaScript 方法:
HTML 部分:
```html
<form id="myForm">
<input type="text" id="textInput">
<button type="submit">提交</button>
</form>
<ul id="myList"></ul>
```
JavaScript 部分:
```javascript
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表单提交的默认行为
var inputText = document.getElementById("textInput").value; // 获取输入框的值
addToList(inputText); // 调用列表显示的方法,将输入框的值传递给它
document.getElementById("textInput").value = ""; // 清空输入框
});
function addToList(text) {
var listItem = document.createElement("li"); // 创建新的列表项
listItem.textContent = text; // 设置列表项的文本内容
document.getElementById("myList").appendChild(listItem); // 将列表项添加到列表中
}
```
这段代码会监听表单的提交事件,获取输入框中的值,然后通过调用 `addToList` 函数将其添加到列表中。最后,清空输入框的值以便下一次输入。
请注意,这只是一个简单的示例,您可能需要根据您的具体需求进行修改。
阅读全文