我有 3 个函数，当用户在消息框中输入他们的名字和姓氏时，它会返回 (a) 他们的名字以数组形式合并，(b) 他们的名字也以对象数组形式合并。 我的问题是，当我在 Google Chrome 中测试它时，按下“保存”按钮时什么也没有显示，但在 JSbin 中它只返回:
[object Object]
这是函数代码(useMerge.js):
var first_name = [];
var last_name = [];
var fInput = document.getElementById("fname");
var lInput = document.getElementById("lname");
var messageBox = document.getElementById("display");
function insert ( ) {
first_name.push( fInput.value );
last_name.push( lInput.value );
Show();
}
function Show () {
//clear messagebox
fInput.value = "";
lInput.value = "";
//show
messageBox.innerHTML = "";
messageBox.innerHTML = mergeHandler(first_name,last_name,merge2Single);
messageBox.innerHTML = mergeHandler(first_name,last_name,merge2Object);
}
//merges
function merge2Single(first, last){
var arr=[];
arr.push(first);
arr.push(last);
return arr.join(" ");
}
function mergeHandler(arr1, arr2, func){
var i=0;
var size = arr1.length;
var result=[];
for(i=0; i<size; i++){
result.push(func(arr1[i], arr2[i]));
}
return result;
}
function merge2Object(first_name, last_name){
var arr=[];
arr.push({FirstName: first_name,
LastName: last_name});
return arr;
}
HTML 代码:
<!DOCTYPE html>
<html>
<head>
<script src="useMerge.js" type="text/javascript"></script>
<meta charset=utf-8 />
<title>UI</title>
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section {
display: block;
}
</style>
</head>
<body>
<form>
<h1>Please enter data</h1>
<input id="fname" type="text" placeholder="First Name" />
<input id="lname" type="text" placeholder="Last Name" />
<input type="button" value="Save" onclick="insert()" />
</form>
<div id="display"></div>
</body>
</html>
最佳答案
用户在函数内提交按钮后，您应该阅读文本框，如下所示:
var first_name = [];
var last_name = [];
var fInput;
var lInput;
var messageBox;
function insert ( ) {
fInput = document.getElementById("fname");
lInput = document.getElementById("lname");
messageBox = document.getElementById("display");
first_name.push( fInput.value );
last_name.push( lInput.value );
Show();
}
function Show () {
//clear messagebox
fInput.value = "";
lInput.value = "";
//show
messageBox.innerHTML = "";
messageBox.innerHTML = mergeHandler(first_name,last_name,merge2Single);
messageBox.innerHTML = mergeHandler(first_name,last_name,merge2Object);
}
//merges
function merge2Single(first, last){
var arr=[];
arr.push(first);
arr.push(last);
return arr.join(" ");
}
function mergeHandler(arr1, arr2, func){
var i=0;
var size = arr1.length;
var result=[];
for(i=0; i<size; i++){
result.push(func(arr1[i], arr2[i]));
}
return result;
}
function merge2Object(first_name, last_name){
var arr=[];
arr.push({FirstName: first_name,
LastName: last_name});
return arr;
}
修复后，您将得到以下结果:
[object Object]
关于javascript - Html 和 JavaScript : How to return user input，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55073851/