When displaying array in JavaScript it only displays ',,,'

Question

I'm attempting to add values from various form fields to an array. I can't seem to figure out why either the array is not storing properly, or displaying properly; the alert output is always ,,,, regardless of my input.

Here's my code:

    var saveInfo = function() {
    
    
      // empty array
      var savedData = [];
      //assigning variables to elements with specific ID name, will change when
      //proper ID name is declared
      savedData.push(firstName = document.getElementsByName("first_name").value);
      savedData.push(lastName = document.getElementsByName("last_name").value);
      savedData.push(emailadd = document.getElementsByName("email").value);
      savedData.push(usrname = document.getElementsByName("username").value);
      alert(savedData);
}

<!DOCTYPE html>
<html>
<title>Registration</title>
<head>
  <script src="finishLater.js">
  </script>
  <link rel="stylesheet" type="text/css" href="newUser.css">
</head>
<body style="background-color: dodgerblue;">
  <h1 style="text-align: center;">HELLO NEW USER</h1><hr><br>
  <fieldset>
    <legend style="text-align: center;">Sign Up</legend><br>
    <form style="text-align: center;">
      First Name:<input type="text" name="first_name"/><br>
      Last Name:<input type="text" name="last_name"/><br>
      Email Address:<input type="text" name="email"/><br>
      Username:<input type="text" name="username"/><br>
      <button type="button" id="submit">Sign UP</button>
      <button type="button" id="finish_later" onclick="saveInfo();">Finish Later</button>
      <button type="button" id="delete_data" onclick="deleteData();">Delete Data</button>
    </form>
  </fieldset>
</body>
</html>

[getElementsByName returns a NodeList Collection of elements with a given name in the document](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName). Anyway, you're pushing `undefined` there, since `NodeList` has no method named `value`. *Which equals to `alert([undefined, undefined, undefined, undefined])`* — choz, Oct 04 '18 at 01:44

score 1 · Accepted Answer · answered Oct 04 '18 at 01:47

1

getElementsByName return a list, you should get the first element of the list by using:

document.getElementsByName("first_name")[0].value

answered Oct 04 '18 at 01:47

Loic

160
2
13

When displaying array in JavaScript it only displays ',,,'

1 Answers1