jwa*_*d01 5 html javascript jquery input object
我正在自学JS并进行一项练习,该练习从用户输入(名字,中间名,姓氏),并将输入保存在JS对象中(稍后我将操纵对象本身并对其进行排序,检查重复项,等等.)
我到处寻找,找不到任何方向.我熟悉将HTML输入保存为变量(var n = document.getElementById('x').value)但我对对象很新.
如何在对象中保存用户输入？我可以在对象中保存多个"提交",如"从用户输入加载对象",然后在稍后的步骤中操作它吗？
HTML:
<body>
<label>First Name:
<input type='text' name='firstName' id='firstName' placeholder="First Name">
</label>
<br>
<br>
<label>Middle Name:
<input type='text' name='middleName' id='middleName' placeholder="Middle Name">
</label>
<br>
<br>
<label>Last Name:
<input type='text' name='lastName' id='lastName' placeholder="Last Name">
</label>
<br>
<br>
<button type="button" onclick="buildList()">Add to List</button>
</body>
我想象的JS对象看起来像,每次用户按下"添加到列表"时,程序会在列表中添加另一个First/Middle/Last名称:
var list = {
firstName:"John",
middleName:"Will",
lastName:"Doe"
},
{
firstName:"Ben",
middleName:"Thomas",
lastName:"Smith"
},
{
firstName:"Brooke",
middleName:"James",
lastName:"Kanter"
};
***注意,稍后我计划计算每个First/Middle/Last Name的频率并将其输出到屏幕上..即: 'FirstName'Jason: 2, 'FirstName'Ed:3; 'MiddleName'Marie:5; 'LastName'Smith:3'
我的目标:创建一个全名列表.将它们分成三个列表:第一个,中间名和姓氏.计算每个列表中名称的频率.---我认为使用对象将是最好的方法.
您可以使用像这样的点击处理程序
var list = [],
$ins = $('#firstName, #middleName, #lastName'),
counter = {
firstName: {},
middleName: {},
lastName: {}
};
$('#add').click(function() {
var obj = {},
valid = true;
$ins.each(function() {
var val = this.value.trim();
if (val) {
obj[this.id] = val;
} else {
var name = this.previousSibling.nodeValue.trim();
alert(name.substring(0, name.length - 1) + ' cannot be blank');
this.focus();
valid = false;
return false;
}
});
if (valid) {
list.push(obj);
$ins.val('');
$.each(obj, function(key, value) {
var count = counter[key][value] || 0;
counter[key][value] = count + 1;
});
}
});
$('#print').click(function() {
$('pre').text(JSON.stringify(list) + '\n\n');
$('pre').append(document.createTextNode(JSON.stringify(counter)));
})pre {
white-space: pre-wrap;
}<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<!-- To show result in the dom instead of console, only to be used in the snippet not in production -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>First Name:
<input type='text' name='firstName' id='firstName' placeholder="First Name">
</label>
<br>
<br>
<label>Middle Name:
<input type='text' name='middleName' id='middleName' placeholder="Middle Name">
</label>
<br>
<br>
<label>Last Name:
<input type='text' name='lastName' id='lastName' placeholder="Last Name">
</label>
<br>
<br>
<button type="button" id="add">Add to List</button>
<button type="button" id="print">Print</button>
<pre></pre>