我需要执行以下操作(我是编程初学者，请原谅我的无知):我必须向用户询问表单上三个不同文本框的三个不同信息。然后用户有一个名为“enter”的按钮，当他点击它时，他在三个字段中输入的文本应该存储在三个不同的数组中，在这个阶段我还想看到用户输入以检查数据是否实际存储在数组中。我一直在尝试让应用程序仅在其中一个数组上存储或显示数据，但没有成功。我有 2 个文件:film.html 和 functions.js。这是代码。任何帮助将不胜感激!
<html>
<head>
<title>Film info</title>
<script src="jQuery.js" type="text/javascript"></script>
<script src="functions.js" type="text/javascript"></script>
</head>
<body>
<div id="form">
<h1><b>Please enter data</b></h1>
<hr size="3"/>
<br>
<label for="title">Title</label> <input id="title" type="text" >
<br>
<label for="name">Actor</label><input id="name" type="text">
<br>
<label for="tickets">tickets</label><input id="tickets" type="text">
<br>
<br>
<input type="button" value="Save" onclick="insert(this.form.title.value)">
<input type="button" value="Show data" onclick="show()"> <br>
<h2><b>Data:</b></h2>
<hr>
</div>
<div id= "display">
</div>
</body>
</html>
var title=new Array();
var name=new Array();
var tickets=new Array();
function insert(val){
title[title.length]=val;
}
function show() {
var string="<b>All Elements of the Array :</b><br>";
for(i = 0; i < title.length; i++) {
string =string+title[i]+"<br>";
}
if(title.length > 0)
document.getElementById('myDiv').innerHTML = string;
}
最佳答案
您实际上并没有追求这些值(value)。您需要像这样收集它们:
var title = document.getElementById("title").value;
var name = document.getElementById("name").value;
var tickets = document.getElementById("tickets").value;
您可以将所有这些放在一个数组中:
var myArray = [ title, name, tickets ];
或多个数组:
var titleArr = [ title ];
var nameArr = [ name ];
var ticketsArr = [ tickets ];
或者，如果数组已经存在，您可以使用它们的 .push()向其推送新值的方法:
var titleArr = [];
function addTitle ( title ) {
titleArr.push( title );
console.log( "Titles: " + titleArr.join(", ") );
}
您的保存按钮不起作用，因为您引用了 this.form ，但是页面上没有表单。为了让它工作，你需要有 <form>包装您的字段的标签:
我做了几处更正，并将更改放在 jsbin 上:http://jsbin.com/ufanep/2/edit
新的形式如下:
<form>
<h1>Please enter data</h1>
<input id="title" type="text" />
<input id="name" type="text" />
<input id="tickets" type="text" />
<input type="button" value="Save" onclick="insert()" />
<input type="button" value="Show data" onclick="show()" />
</form>
<div id="display"></div>
还有一些改进的空间，比如去掉onclick属性(这些绑定(bind)应该通过 JavaScript 完成，但这超出了这个问题的范围)。
我还对您的 JavaScript 进行了一些更改。我首先创建三个空数组:
var titles = [];
var names = [];
var tickets = [];
现在我们有了这些，我们需要对输入字段的引用。
var titleInput = document.getElementById("title");
var nameInput = document.getElementById("name");
var ticketInput = document.getElementById("tickets");
我还得到了对我们消息显示框的引用。
var messageBox = document.getElementById("display");
insert()函数使用对每个输入字段的引用来获取它们的值。然后它使用 push()方法在各自的数组上将当前值放入数组。
完成后，它会调用 clearAndShow()函数负责清除这些字段(使它们为下一轮输入做好准备)，并显示三个数组的组合结果。
function insert ( ) {
titles.push( titleInput.value );
names.push( nameInput.value );
tickets.push( ticketInput.value );
clearAndShow();
}
如前所述，此函数通过设置 .value 开始每个输入的属性为空字符串。然后它清除了 .innerHTML我们的消息框。最后，它调用 join()我们所有数组上的方法将它们的值转换为逗号分隔的值列表。然后将生成的字符串传递到消息框中。
function clearAndShow () {
titleInput.value = "";
nameInput.value = "";
ticketInput.value = "";
messageBox.innerHTML = "";
messageBox.innerHTML += "Titles: " + titles.join(", ") + "<br/>";
messageBox.innerHTML += "Names: " + names.join(", ") + "<br/>";
messageBox.innerHTML += "Tickets: " + tickets.join(", ");
}
最终结果可在线使用http://jsbin.com/ufanep/2/edit
关于javascript - 将用户输入存储在数组中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10523200/