Die*_*bel 6 javascript forms arrays
我需要做以下事情(我是编程的初学者,所以请原谅我的无知):我必须向用户询问表格上三个不同文本框的三个不同信息.然后用户有一个名为"enter"的按钮,当他点击它时,他在三个字段上输入的文本应该存储在三个不同的数组上,在这个阶段我还想看到用户输入检查数据实际上是存储的在数组中.我beem尝试使应用程序存储或仅在其中一个数组上显示数据失败.我有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;
}
Sam*_*son 18
你实际上并没有在价值观之后出去.你需要像这样收集它们:
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属性(这些绑定应该通过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在线使用