从HTML输入字段创建随机javascript数组

基础概念

HTML 输入字段通常是指 <input> 元素，用户可以在其中输入文本或其他类型的数据。JavaScript 数组是一种数据结构，用于存储一系列的值。

类型

根据输入字段的类型，可以生成不同类型的数组：

文本数组：如果输入字段是文本类型（如 <input type="text">），生成的数组将包含字符串。
数字数组：如果输入字段是数字类型（如 <input type="number">），生成的数组将包含数字。
布尔数组：如果输入字段是布尔类型（如 <input type="checkbox">），生成的数组将包含布尔值。

应用场景

数据收集：用于收集用户输入的数据，并进行进一步处理。
数据分析：根据用户输入生成数组，进行数据分析和可视化。
游戏开发：在游戏开发中，根据用户输入生成随机数组，增加游戏的趣味性和挑战性。

示例代码

以下是一个简单的示例，展示如何从 HTML 输入字段创建随机 JavaScript 数组：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Array Generator</title>
</head>
<body>
    <input type="text" id="inputField" placeholder="Enter numbers separated by commas">
    <button onclick="generateRandomArray()">Generate Array</button>
    <p id="result"></p>

    <script>
        function generateRandomArray() {
            const inputField = document.getElementById('inputField');
            const inputValue = inputField.value;
            const numbers = inputValue.split(',').map(Number);

            if (numbers.some(isNaN)) {
                document.getElementById('result').innerText = 'Please enter valid numbers separated by commas.';
                return;
            }

            const randomArray = numbers.sort(() => Math.random() - 0.5);
            document.getElementById('result').innerText = 'Random Array: [' + randomArray.join(', ') + ']';
        }
    </script>
</body>
</html>

参考链接

常见问题及解决方法

输入无效数据：
- 问题：用户输入了非数字字符。
- 原因：用户输入的数据类型与预期不符。
- 解决方法：在生成数组之前，验证输入数据的有效性。

数组排序问题：
- 问题：生成的随机数组不符合预期。
- 原因：排序算法不正确或不随机。
- 解决方法：使用 Math.random() 函数来实现随机排序。

通过以上方法，可以有效地从 HTML 输入字段创建随机 JavaScript 数组，并解决常见的相关问题。

从HTML输入字段创建随机javascript数组

、、、

我有一个基本的HTML表单，要求输入一个介于1和10之间的数字。基于这个数字，我想创建一个新的数组。现在，代码显示了一个新创建的数组的警告框，但最终它将是一个显示结果的表。当前数组有10个值，我希望它随机生成一个新数组。我想我有它，只是错过了一件或几件事。

浏览 51提问于2021-07-28得票数 0

回答已采纳

1回答

Javascript/JQuery故障排除

、、、、

Div，而不是从javascript创建的Div)。toAdd是输入值的文本。同时，Javascript将toAdd字符串输入到包含数组(Ex：Var theArray = [])的变量中。然后有一个脚本创建一个随机数，它从数组中随机选择一个字符串(Ex:生成的随机数从数组中选择"Yes“)。我遇到的问题是创建一个<

浏览 0提问于2014-04-12得票数 1

回答已采纳

1回答

如何使我的标签在键入后显示为链接？

、、

一切都设置好了，但我想要的效果是，一旦他们输入了一个标签，文本框下面就会出现他们输入的任何标签，就像在这个网站上提问时一样。谢谢!

浏览 0提问于2011-06-22得票数 0

回答已采纳

1回答

如何生成用户输入的数组

、

代码应该从用户输入中随机选择，以生成一个随机输入。HTML包含一个表单，用户可以在其中输入保存的值，但我不知道如何将它们存储在javascript中的数组中，在javascript中，let决策是存储值的内容。当用户输入一个选项时，他们按submit，其中javascript用javascript中输入的选项(不包括这个选项)追加一个子选项，但包

浏览 2提问于2022-10-09得票数 3

回答已采纳

2回答

将jQuery标签-it输入保存为php数组

、、、、

为我的用户创建一个“技能”输入表单。我可以使用tag-it的UI，但不能将用户输入放入PHP数组中。我试图序列化这个数组并将其保存到mysql数据库中，以便稍后显示，但我甚至无法将数据放入数组中。这里是javascript初始化标签-it： allowSpaces: true, placeholderText: "SeparateSkills: </labe

浏览 1提问于2013-01-23得票数 1

1回答

使用循环根据Javascript中的用户输入生成任意#随机数学问题

我的任务是在Javascript中创建一个程序，该程序通过提示符根据用户的答案生成用户想要的多少道数学题。因此，如果用户回答提示说他们想要5个问题，我需要生成5个数学问题，所有的随机数字，每次页面刷新时都会改变。我是一个初学者水平的网络编程学生，我不太确定从哪里开始编码这个，因为我的老师没有给我们提供很多例子和练习使用循环来制作这个程序。有什么建议吗？

浏览 8提问于2016-10-05得票数 0

回答已采纳

1回答

如何动态地将嵌套表单字段添加到当前表单中？

Chatgroup控制器中，当路由到new函数时，我可以通过指定userChatGroups:[%UserChatGroup{},%UserChatGroup{}]等来硬编码聊天组中的成员数，其中硬编码数就是这个数组的大小然后用javascript插入输入字段。提交时，新输入字段将是新表单对象的字段。如何在我的view.html.eex中定义函数，以便在单击时调用它们，而不是立

浏览 1提问于2015-10-06得票数 7

回答已采纳

2回答

传递javascript数组的输入字段

有没有可能有一个输入字段，用户可以在其中输入数组，并且它传递的值的函数将其视为数组？需要明确的是，使用javascript和HTML可以做到这一点吗？.> } 我希望有一个输入域，在那里我可以输入像[1,2,3,4..]或[(1,2),(2,3)...]这样的东西，并将其传递给函数，而不需要任何进一步的操作，希望它会将

浏览 0提问于2013-06-20得票数 0

回答已采纳

3回答

使用Javascript获取HTML数组长度

、、

当用户双击选择框中的元素时，我会动态创建输入。每个元素类型可以有多个输入，所以我将它们创建为HTML数组。在创建输入时，还会创建一个指向javascript函数的链接。所述功能将为所点击的特定字段打开日历提示。javascript数组一样。或者，我可以在每次创建这个字段时增加一个变量，我只是想确保我没有遗漏一些非常明显的东西。

浏览 2提问于2011-08-29得票数 0

回答已采纳

3回答

将HTML输入中的项添加到JavaScript中的空数组中

、、、

我试图用从单个HTML输入字段输入的用户名填充一个空白Javascript数组(输入示例: bill、bob、jim)，但我无法按照我想要的方式工作。我使用的HTML代码是：<button class="btn" oncli

浏览 6提问于2022-06-15得票数 0

2回答

使用javascript从输入数组创建HTML列表

、、、

我正在尝试使用数组函数将用户输入添加到列表中。我想在用户输入之前在数组中已经有3个元素，然后用另一个数组方法删除添加的输入。但首先添加输入一直是我的挑战。我已经为视图添加了代码。

浏览 26提问于2019-11-01得票数 0

回答已采纳

2回答

更改另一个html页面中的div

、

仍然在这里学习一些javascript，做了其他的事情，但现在它的最后也是最重要的部分。我有两个html页面-其中一个页面使用javascript动态添加文本字段(当然是删除它们) (genmain.html)，另一个页面使用文本字段输入(table.html)。因此，我已经创建了一个函数来检索值数组。，它包含字段中的所有值。问题是，我希望将这些值从数组设置为页面

浏览 5提问于2015-04-11得票数 0

回答已采纳

2回答

我发现自己遇到了以下问题:我的表单包含随机数量的字段。(这是为了让用户可以输入其他团队成员的名字--并且没有设置团队的大小。)我需要这个输入的数据进行格式化，以准备存储在数据库中。数据库结构很好，它只是随机地获取一些$_POST，并将它们放入一个数组中，这就是问题所在。到目前为止，我已经得到了一些javascript，它允许用户创建/删除无限数量的字段，并递增ids/names (例如TeamMemberName1

浏览 1提问于2012-02-28得票数 1

回答已采纳

1回答

使用JavaScript，可以使用函数创建数组吗？

、、

我是编程新手，目前我正在通过在线课程组合学习JavaScript。我正在处理的一个挑战是使用一个函数从数组中返回一个随机字符串。这一部分本身很简单，但似乎我需要能够从调用函数时提供的输入创建数组。举个例子，如果我像这样创建一个函数：然后我调用了这个函数，并给它提供了以下输入： namePicker("Billy","Timmy&q

浏览 0提问于2020-02-23得票数 1

1回答

使用for循环和HTML输入在Javascript中创建数组

、、、、

我在html表单中索引了一堆输入。我已经试着尽可能多地构建它。是一个jsFiddle：<div style="padding:5px;cle

浏览 0提问于2013-08-25得票数 0

回答已采纳

2回答

生成唯一的短号，而不是使用医生的ID？

、

我有一个业务案例，其中我需要在集合中包含一个数字字段，该字段将比另一个文档的number字段唯一。这个数字必须很短才能输入，并且应该是随机的。例如: 2832。我想在JavaScript中创建一个4位数字的随机数，然后每当生成一个新的数字时，检查一个单独的集合，其中包含一个包含每个唯一数字的数组字段。如果该数字已经存在，则生成一个新数字并再次检查，如果它不存在，则将该唯一数字添加到数组中。这是最优

浏览 10提问于2022-08-11得票数 0

回答已采纳

3回答

由数组JavaScript填充的单选按钮

、、

我希望能够有一个数组(如下面的数组)：这将获得这些值(不管数组中有多少值我还希望能够从数组列表中随机填充单选按钮。例如：如果可

浏览 4提问于2017-04-21得票数 1

回答已采纳

1回答

cakephp javascript动态更新

、、

都创建了一个cakephp(使用2.1.2)页面。我们提示用户输入他们在后面的字段数(一个int)，然后我们希望页面对输入的数字使用for循环。>');问题是，我们如何使用alert.ctp创建一个变量，然后将该变量用于for循环，以打印出接受用户输入的表单。编辑：<script type="text/javascript"&g

浏览 0提问于2012-07-30得票数 2

回答已采纳

3回答

在使用UpdatePanel时获取动态生成的HTML控件

、、

我正在使用javascript动态生成HTML元素。这些控件位于浏览器的更新面板中。这是有原因的吗？我当前的解决方案创建了一个字符串数组，将其转换为JSON字符串，并将其存储在一个隐藏变量中，该变量将在服务器端代码中定义隐藏字段时回发到服务器。<div id="dynamicInputsGoHere" class="hiddenContent" runat="ser

浏览 0提问于2009-10-15得票数 0

回答已采纳

1回答