Question

我有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>

Answer 1

在用户提交功能内的按钮后，您应该阅读文本框，如下所示：

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]

Answer 2

您正在显示一个对象。使用JSON.stringify(your_obj)，这会将您的对象转换为字符串。

Answer 3

我基本上可以在您的代码中看到两个问题

您要在dom准备就绪之前加载脚本，所以

var fInput = document.getElementById("fname"); var lInput = document.getElementById("lname"); var messageBox = document.getElementById("display");

js无法从dom中找到这些元素

要解决此问题，请在主体的末端附近加载js

<body> // rest of html <script src="useMerge.js" type="text/javascript"></script> </body>
如果要连接名字和姓氏数组，只需concat这两个数组，然后使用join

var first_name = [];
var last_name = [];

var messageBox = document.getElementById("display");
var messageBox2 = document.getElementById("display2");

function insert() {
  var fInput = document.getElementById("fname");
  var lInput = document.getElementById("lname");
  first_name.push(fInput.value);
  last_name.push(lInput.value);

  Show();
}

function Show() {
  //clear messagebox
  fInput.value = "";
  lInput.value = "";

  //show
  messageBox.innerHTML = "";
  messageBox2.innerHTML = "";

  messageBox.innerHTML = mergeHandler(first_name, last_name, merge2Single);
  messageBox2.innerHTML = JSON.stringify(mergeHandler(first_name, last_name, merge2Object));
}

//merges 
function merge2Single(first, last) {
  return first_name.concat(last_name).join(' ');
}

function mergeHandler(arr1, arr2, func) {
  return func(arr1, arr2);
}

function merge2Object(first_name, last_name) {
  var arr = [];
  arr.push({
    FirstName: first_name,
    LastName: last_name
  });

  return arr;
}

article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

<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>
<div id="display2"></div>

Answer 4

在此功能中尝试此操作。只需映射对象并连接字符串即可。顺便说一句，您试图通过在同一div

中显示文本来覆盖函数的结果

最后在defer标签中使用属性<script>。现在，加载html之前，浏览器中的javascript正在运行。只需这样做：

<script src="script.js" type="text/javascript" defer></script>

function merge2Object(first_name, last_name){
    var arr=[];
    arr.push({FirstName: first_name,
          LastName: last_name});

    console.log(arr);
    return arr.map(e => `${e.FirstName} ${e.LastName}`).join(",");
}

HTML和Javascript：如何返回用户输入

4 个答案: