Html and Javascript: How to return user input

Question

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>

add the defer attribute to your script tag for useMerge.js — Randy Casburn
– Randy Casburn, Commented Mar 9, 2019 at 4:04

royalghost · Accepted Answer · 2019-03-09 04:26:39Z

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]

Arnold Parge · Accepted Answer · 2019-03-09 04:06:32Z

0

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

answered Mar 9, 2019 at 4:06

Arnold Parge

6,9052 gold badges32 silver badges35 bronze badges

Comments

brk · Accepted Answer · 2019-03-09 04:21:22Z

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>

Pato Salazar · Accepted Answer · 2019-03-09 04:26:49Z

0

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, 2019 at 4:26

Pato Salazar

1,47712 silver badges22 bronze badges

Collectives™ on Stack Overflow

Html and Javascript: How to return user input

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related