尝试捕获表单中的用户输入，并将其添加到数组中并显示输出
要捕获表单中的用户输入并将其添加到数组中，然后显示输出，可以使用HTML、JavaScript和CSS来实现。以下是一个简单的示例：
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Input Capture</title>
</head>
<body>
<form id="userForm">
<label for="userInput">Enter something:</label>
<input type="text" id="userInput" name="userInput">
<button type="button" onclick="addToArray()">Add to Array</button>
</form>
<ul id="output"></ul>
<script src="script.js"></script>
</body>
</html>JavaScript部分（script.js）
let inputArray = [];
function addToArray() {
const userInput = document.getElementById('userInput').value;
if (userInput.trim() !== '') {
inputArray.push(userInput);
displayOutput();
document.getElementById('userInput').value = ''; // Clear the input field
} else {
alert('Please enter some text.');
}
}
function displayOutput() {
const outputList = document.getElementById('output');
outputList.innerHTML = ''; // Clear previous outputs
inputArray.forEach((item, index) => {
const listItem = document.createElement('li');
listItem.textContent = `Item ${index + 1}: ${item}`;
outputList.appendChild(listItem);
});
}解释
- HTML部分:
- 创建了一个表单
<form>，包含一个输入框<input>和一个按钮<button>。 - 输入框用于捕获用户输入，按钮用于触发添加到数组的操作。
- 使用
<ul>元素来显示数组中的内容。
- 创建了一个表单
- JavaScript部分:
- 定义了一个全局数组
inputArray来存储用户输入。 addToArray函数获取输入框的值，检查是否为空，如果不为空则将其添加到数组中，并调用displayOutput函数更新显示。displayOutput函数清空之前的输出，然后遍历数组，为每个元素创建一个新的列表项<li>并添加到<ul>中。
- 定义了一个全局数组
优势和应用场景
- 实时反馈: 用户输入后立即看到结果，增强了用户体验。
- 数据收集: 可以方便地收集和展示用户的多次输入，适用于调查问卷、数据录入等场景。
- 简单易用: 代码结构简单，易于理解和维护。
可能遇到的问题及解决方法
- 输入为空: 如果用户未输入任何内容就点击按钮，可以通过检查输入值是否为空来避免添加空项。
- 页面刷新丢失数据: 如果页面刷新，数组中的数据会丢失。可以考虑使用本地存储（如
localStorage）来持久化数据。
示例代码优化建议
- 可以添加更多的输入验证，比如检查输入长度或特定格式。
- 使用事件监听器代替内联的
onclick属性，使代码更加模块化和易于管理。
通过这种方式，你可以有效地捕获和处理用户的表单输入，并实时展示结果。
相关·内容
我试图通过获取值并将其推入数组来捕获表单中的用户输入。然后我想将它们与一个警告一起输出，但是由于某种原因，这些值被连接起来而不是相加。我的输出也有一个随机的零。我应该得到三个值的总和(例如1+2+3应该给出6，而不是0123。敬请指教，谢谢！
浏览 17提问于2017-06-30得票数 0
回答已采纳
1回答
我正在尝试创建一个页面，从一个值数组中每次显示一个单词，时间为5秒。在此页面上还有一个表单，其中有一个输入字段，人们可以在其中输入试图拼写该单词的内容。我想捕获在包含
一系列不正确的</e
浏览 1提问于2018-05-29得票数 0
回答已采纳
1回答
我有一个问题，那就是是否可以在文本字段中为输入的文本编制索引并操作数据。例如:用户输入10个单词，然后开始对文本进行索引。例如:如果用户<e
浏览 0提问于2018-01-01得票数 0
1回答
我正在开发一个网站，但当我转义然后将记录插入到数据库中时，我正在使用try catch。我该如何创建这个数组呢？
谢谢,
浏览 1提问于2012-11-22得票数 0
3回答
我被困在如何让表单记住用户输入的国家。最后，它将是一个数据库，但我也想验证，国家已经输入。在测试时，我只得到错误消息。
<?
浏览 0提问于2012-12-21得票数 1
2回答
我正在尝试备份我的编程，并学习一些我不知何故遗漏的东西(除非我不理解这个问题)。我试图提示用户输入项目的名称，并且我希望将该名称存储在一个变量中。“您不能使用string类-而是使用字符的数组。”这就是问题所在:如何获取用户输入并将其存储在字符数组中？
用户将输入一个单词，然后按enter...如何将其
浏览 1提问于2012-04-03得票数 3
1回答
为了帮助您理解，我将尝试使用下面的示例进行解释：CREATE TABLE names (id INT NOT NULL PRIMARY KEY AUTO_INCREMENT, name VARCHAR(100));<form> <inputtype="submit" name="
浏览 3提问于2013-02-02得票数 0
回答已采纳
2回答
我有一个来自REST API的JSON数组。我使用Knockout映射插件来处理数组，并将JSON加载到预设的表单值中(如果用户之前已经在表单中添加值-我在那里有数据来测试Knockout数组)。表单本质上是添加或删除带有输入的div块，这样用户就可以添加/删除“工作”体验。
我的问题是试图破译插件如何映射数组
浏览 2提问于2012-07-31得票数 0
1回答
将数组添加到日期时间输入
、、、
我有一个带有datetime_local html5日期时间输入的表单，以便移动用户可以使用他们的本地日期时间选择器，而不是通常比较笨重的jquery替代。
我希望用户能够选择多个日期。到目前为止，我使用onchange触发器捕获选定的日期时间并将其添加到数组中。然后，我尝试将数组粘贴到datetime输入<e
浏览 4提问于2017-09-01得票数 0
回答已采纳
1回答
客户想要一个基于文本输入，下拉选择，复选框选择等执行计算的web应用程序。他们想要持久化表单数据输入，但他们不想将它们存储在服务器上。相反，他们更喜欢将输入保留在本地。我一直在寻找，并确定这不是一种标准方法。然后我遇到了HTML5存储，但看起来这个选项并不完全是我想的那样。客户端希望能够保存和加载输入集，如mortgage scenario 1或mortgage scenario 20 year。基本上就像一个“另存为”和一个“打开”按钮。我报告说，这
浏览 0提问于2014-02-27得票数 0
2回答
如何将数组从模型发送到视图文件？
背景:我有一个表格，名字可以放在里面(查看文件)。然后，我将这个信息传递给我的控制器文件，它检查是否有信息添加到表单中。如果没有，则会显示错误消息，并告诉用户必须添加名称。如果名称已经添加到表单中，则控制器将信息传递给模型，该模型检查数据库中是否存在任何名称。如果数据库中已经存在一些或所有名称，则将其传递给<em
浏览 5提问于2011-05-22得票数 0
我有一个JSP表单，它读取用户的输入并调用来处理数据。一旦数据被处理，就会调用session.setAttribute来存储重要信息。然后在Javascript中，我尝试读取会话变量并将其显示在屏幕上。javascript"> document.write (t
浏览 1提问于2012-02-08得票数 2
我正在尝试将字符串添加到我在作用域中定义的空数组中。数组中元素的数量可以根据用户在player count输入字段中键入的内容而变化。现在，我有一个$watch函数，它检查用户是否增加或减少玩家数量，并相应地添加新的姓名输入字段。对于每个输入字段，我希望在用户
浏览 2提问于2017-08-24得票数 1
回答已采纳
2回答
如何将另一个选项添加到网站和
、、、、
我有一个javascript，它显示并隐藏了html表单的选项。我要做的是让用户能够添加一个新的类别，然后将其作为一个选项写入数据库，并将其添加到选项表单中。下面是html代码的一个示例，
<select id="team1" name="team1" style="display:none">
浏览 8提问于2013-11-27得票数 0
回答已采纳
1回答
正在尝试将表单输入保存到变量中
、、、、
我用谷歌搜索了一下，查看了stackoverflow，并尝试了这些示例，但我仍然有困难。目标:创建一个表单框，用户可以在其中输入城市名称，这样我就可以在变量中捕获它，并使用它从goodle geocode api中查找城市纬度和经度。cityForm" type="text" >
<button id="subButton" type="button&qu
浏览 16提问于2017-02-12得票数 0
回答已采纳
1回答
我正在尝试创建一个user entry表单，它既能捕获用户输入，又能显示状态更新消息。我想到的最巧妙的方法是让我的模式表单在非模式表单上显示用户输入。用户输入信息并单击确定后，模式表单中的信息将被复制到非模式表单，模式<e
浏览 3提问于2021-10-04得票数 0
3回答
我试着搜索这个，但没有找到好的解决方案。我的问题是我有一个只有几个文本框的HTML表单。一旦用户输入详细信息并按下提交，我想将这个相同的HTML表单发送到管理员电子邮件。问题是我不能得到带有值的HTML标记。有没有什么建议。hidden" name="html_data" id="html_data"/>
浏览 1提问于2013-09-04得票数 0
3回答
我是c#的新手，我试图从文本框中插入一个数字，并添加了一个按钮来提交数字。然后，我希望将其添加到数组中并输出到列表框中。但是，我正在将整个数组输出到感恩节列表框中。如何只显示输入的号码？
浏览 2提问于2016-11-04得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
