Html and Javascript: How to return user inputHow do JavaScript closures work?How do I remove a property from a JavaScript object?How do I check if an array includes an object in JavaScript?How do I redirect to another webpage?How do I include a JavaScript file in another JavaScript file?What does “use strict” do in JavaScript, and what is the reasoning behind it?How to check whether a string contains a substring in JavaScript?How do I remove a particular element from an array in JavaScript?Why does HTML think “chucknorris” is a color?How to use foreach with array in JavaScript?

Why does this relative pronoun not take the case of the noun it is referring to?

Could a US political party gain complete control over the government by removing checks & balances?

What does "enim et" mean?

Does the radius of the Spirit Guardians spell depend on the size of the caster?

Should I join an office cleaning event for free?

How would photo IDs work for shapeshifters?

cryptic clue: mammal sounds like relative consumer (8)

When blogging recipes, how can I support both readers who want the narrative/journey and ones who want the printer-friendly recipe?

How do we improve the relationship with a client software team that performs poorly and is becoming less collaborative?

How do I create uniquely male characters?

Need help identifying/translating a plaque in Tangier, Morocco

Why Is Death Allowed In the Matrix?

Showing the closure of a compact subset need not be compact

Prevent a directory in /tmp from being deleted

least quadratic residue under GRH: an EXPLICIT bound

How can the DM most effectively choose 1 out of an odd number of players to be targeted by an attack or effect?

How to determine if window is maximised or minimised from bash script

Why don't electron-positron collisions release infinite energy?

Schwarzschild Radius of the Universe

What Brexit solution does the DUP want?

Is there a way I can return more than one integer from a method?

Is there a familial term for apples and pears?

How to delete an array properly in Java

Shell script can be run only with sh command

Html and Javascript: How to return user input

How do JavaScript closures work?How do I remove a property from a JavaScript object?How do I check if an array includes an object in JavaScript?How do I redirect to another webpage?How do I include a JavaScript file in another JavaScript file?What does “use strict” do in JavaScript, and what is the reasoning behind it?How to check whether a string contains a substring in JavaScript?How do I remove a particular element from an array in JavaScript?Why does HTML think “chucknorris” is a color?How to use foreach with array in JavaScript?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

I have 3 functions that, when the user enters their first and last name in the message box, it returns (a)Their name merged in array form and (b)Their names merged as well but in an array of objects.
My problem is that when I test it in Google Chrome, nothing shows up when I press the Save button, but in JSbin it just returns:

[object Object]

This is the functions code (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 code:

<!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>

edited Mar 9 at 4:05

asked Mar 9 at 4:00

B.Uriah

174

1

add the defer attribute to your script tag for useMerge.js

– Randy Casburn
Mar 9 at 4:04

add a comment |

[object Object]

This is the functions code (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 code:

<!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>

edited Mar 9 at 4:05

asked Mar 9 at 4:00

B.Uriah

174

1

add the defer attribute to your script tag for useMerge.js

– Randy Casburn
Mar 9 at 4:04

add a comment |

[object Object]

This is the functions code (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 code:

<!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>

edited Mar 9 at 4:05

asked Mar 9 at 4:00

B.Uriah

174

[object Object]

This is the functions code (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 code:

<!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>

javascript html arrays json

edited Mar 9 at 4:05

asked Mar 9 at 4:00

B.Uriah

174

edited Mar 9 at 4:05

asked Mar 9 at 4:00

B.Uriah

174

edited Mar 9 at 4:05

asked Mar 9 at 4:00

B.Uriah

174

asked Mar 9 at 4:00

B.Uriah

174

asked Mar 9 at 4:00

B.Uriah

174

1

add the defer attribute to your script tag for useMerge.js

– Randy Casburn
Mar 9 at 4:04

add a comment |

1

add the defer attribute to your script tag for useMerge.js

– Randy Casburn
Mar 9 at 4:04

add the defer attribute to your script tag for useMerge.js

– Randy Casburn
Mar 9 at 4:04

add a comment |

4 Answers
4

active

oldest

votes

You are putting an object in display. Use JSON.stringify(your_obj), this will convert your object into string.

answered Mar 9 at 4:06

Arnold Parge

1,81611319

add a comment |

You should read the textbox after the user submit the button inside the function as shown below :

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;

After this fix, you get the following result:

[object Object]

answered Mar 9 at 4:26

Prabin Paudel

1,29741527

add a comment |

Primarily I can see two issue in your code

You are loading the script before dom is ready so

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

js will not able to find these elements from the dom

To solve this issue load js near closing end of body

<body> // rest of html <script src="useMerge.js" type="text/javascript"></script> </body>

If you want to join the first name and last number array , just concat those two arrays and then use 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>

answered Mar 9 at 4:21

brk

30k32246

add a comment |

Try this in this function. Just map the object and joint the strings. By the way, you are overriding the results of your functions by trying to display the text in the same div

Finally use the attribute defer in your <script> tag. Right now your javascript in the browser is running before your html is loaded. Just do this:

<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(",");

answered Mar 9 at 4:26

Pato Salazar

931719

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55073851%2fhtml-and-javascript-how-to-return-user-input%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

You are putting an object in display. Use JSON.stringify(your_obj), this will convert your object into string.

answered Mar 9 at 4:06

Arnold Parge

1,81611319

add a comment |

You are putting an object in display. Use JSON.stringify(your_obj), this will convert your object into string.

answered Mar 9 at 4:06

Arnold Parge

1,81611319

add a comment |

You are putting an object in display. Use JSON.stringify(your_obj), this will convert your object into string.

answered Mar 9 at 4:06

Arnold Parge

1,81611319

You are putting an object in display. Use JSON.stringify(your_obj), this will convert your object into string.

answered Mar 9 at 4:06

Arnold Parge

1,81611319

answered Mar 9 at 4:06

Arnold Parge

1,81611319

answered Mar 9 at 4:06

Arnold Parge

1,81611319

answered Mar 9 at 4:06

Arnold Parge

1,81611319

add a comment |

You should read the textbox after the user submit the button inside the function as shown below :

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;

After this fix, you get the following result:

[object Object]

answered Mar 9 at 4:26

Prabin Paudel

1,29741527

add a comment |

You should read the textbox after the user submit the button inside the function as shown below :

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;

After this fix, you get the following result:

[object Object]

answered Mar 9 at 4:26

Prabin Paudel

1,29741527

add a comment |

You should read the textbox after the user submit the button inside the function as shown below :

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;

After this fix, you get the following result:

[object Object]

answered Mar 9 at 4:26

Prabin Paudel

1,29741527

You should read the textbox after the user submit the button inside the function as shown below :

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;

After this fix, you get the following result:

[object Object]

answered Mar 9 at 4:26

Prabin Paudel

1,29741527

answered Mar 9 at 4:26

Prabin Paudel

1,29741527

answered Mar 9 at 4:26

Prabin Paudel

1,29741527

answered Mar 9 at 4:26

Prabin Paudel

1,29741527

add a comment |

Primarily I can see two issue in your code

You are loading the script before dom is ready so

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

js will not able to find these elements from the dom

To solve this issue load js near closing end of body

<body> // rest of html <script src="useMerge.js" type="text/javascript"></script> </body>

If you want to join the first name and last number array , just concat those two arrays and then use 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>

answered Mar 9 at 4:21

brk

30k32246

add a comment |

Primarily I can see two issue in your code

You are loading the script before dom is ready so

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

js will not able to find these elements from the dom

To solve this issue load js near closing end of body

<body> // rest of html <script src="useMerge.js" type="text/javascript"></script> </body>

If you want to join the first name and last number array , just concat those two arrays and then use 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>

answered Mar 9 at 4:21

brk

30k32246

add a comment |

Primarily I can see two issue in your code

You are loading the script before dom is ready so

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

js will not able to find these elements from the dom

To solve this issue load js near closing end of body

<body> // rest of html <script src="useMerge.js" type="text/javascript"></script> </body>

If you want to join the first name and last number array , just concat those two arrays and then use 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>

answered Mar 9 at 4:21

brk

30k32246

Primarily I can see two issue in your code

You are loading the script before dom is ready so

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

js will not able to find these elements from the dom

To solve this issue load js near closing end of body

<body> // rest of html <script src="useMerge.js" type="text/javascript"></script> </body>

If you want to join the first name and last number array , just concat those two arrays and then use 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>

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>

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>

answered Mar 9 at 4:21

brk

30k32246

answered Mar 9 at 4:21

brk

30k32246

answered Mar 9 at 4:21

brk

30k32246

answered Mar 9 at 4:21

brk

30k32246

add a comment |

Try this in this function. Just map the object and joint the strings. By the way, you are overriding the results of your functions by trying to display the text in the same div

Finally use the attribute defer in your <script> tag. Right now your javascript in the browser is running before your html is loaded. Just do this:

<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(",");

answered Mar 9 at 4:26

Pato Salazar

931719

add a comment |

Try this in this function. Just map the object and joint the strings. By the way, you are overriding the results of your functions by trying to display the text in the same div

Finally use the attribute defer in your <script> tag. Right now your javascript in the browser is running before your html is loaded. Just do this:

<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(",");

answered Mar 9 at 4:26

Pato Salazar

931719

add a comment |

Try this in this function. Just map the object and joint the strings. By the way, you are overriding the results of your functions by trying to display the text in the same div

Finally use the attribute defer in your <script> tag. Right now your javascript in the browser is running before your html is loaded. Just do this:

<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(",");

answered Mar 9 at 4:26

Pato Salazar

931719

Try this in this function. Just map the object and joint the strings. By the way, you are overriding the results of your functions by trying to display the text in the same div

Finally use the attribute defer in your <script> tag. Right now your javascript in the browser is running before your html is loaded. Just do this:

<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(",");

answered Mar 9 at 4:26

Pato Salazar

931719

answered Mar 9 at 4:26

Pato Salazar

931719

answered Mar 9 at 4:26

Pato Salazar

931719

answered Mar 9 at 4:26

Pato Salazar

931719

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ggtcf

4 Answers
4

Your Answer

Post as a guest

4 Answers
4

4 Answers
4

Post as a guest

Popular posts from this blog

Can't initialize raids on a new ASUS Prime B360M-A motherboard2019 Community Moderator ElectionSimilar to RAID config yet more like mirroring solution?Can't get motherboard serial numberWhy does the BIOS entry point start with a WBINVD instruction?UEFI performance Asus Maximus V Extreme

4 Answers 4

Your Answer

Sign up or log in

Post as a guest

Post as a guest

4 Answers 4

4 Answers 4

Sign up or log in

Post as a guest

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Popular posts from this blog

Can't initialize raids on a new ASUS Prime B360M-A motherboard2019 Community Moderator ElectionSimilar to RAID config yet more like mirroring solution?Can't get motherboard serial numberWhy does the BIOS entry point start with a WBINVD instruction?UEFI performance Asus Maximus V Extreme

4 Answers
4

4 Answers
4

4 Answers
4