getting extra value in JS array

Question

I want to create from user input two arrays while calling a function. The issue is that I get an extra value in the array that I did not type in; it’s looks like a default value...

I have the following code:

const NameArr = [];
const IdArr = [];

function getName() {
  const Input = document.getElementById("input").value;
  const list_names = Input.split(", ");

  for (let i of list_names) {
    NameArr.push(i);
    IdArr.push(i);
  };
  console.log(NameArr, IdArr);
  return NameArr, IdArr;
};

getName();

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <script src="main.js" charset="utf-8" defer></script>
    <title></title>
  </head>
  <body>
    <form id="form" action="#" method="post">
      <input type="text" id="input">
      <button onclick="getName();">Get Data</button>
    </form>
  </body>
</html>

I am not sure why I get an extra value [""] in my arrays...

please change the form action to # or add a return false to the onclick action to prevent the demo code snippet redirecting away from the question after pressing the get data button. — Ingo Steinke
– Ingo Steinke, Commented Nov 15, 2021 at 9:51
The getName(); inside the global script adds an extra "" to both, globally defined arrays. Remove that line, it looks like a left over from something. — Salman Arshad
– Salman Arshad, Commented Nov 15, 2021 at 9:56
"To me, the time of execution of the getName() function is when you press enter or when you click the button..." - Erm, no... o.O You execute it right at the end of the script — Andreas
– Andreas, Commented Nov 15, 2021 at 9:58
and in order to execute it once the button is pressed, it is called in the HTML with the <button onclick="getName();">Get Data</button>, right? — Louis
– Louis, Commented Nov 15, 2021 at 10:02

Ahmed · Accepted Answer · 2021-11-21 13:40:55Z

3

You are calling getName() at the end of your code.

Inside getName you are getting the value of your input field which is initially the empty string ""

const Input = document.getElementById("input").value;

Then you are using the push() method which will push the empty string at first and now this is the content of your array

[""]

Later when you add other values and call getName() you will add the values on top of the already existing value

[""]

edited Nov 21, 2021 at 13:40

answered Nov 15, 2021 at 10:06

Ahmed

60112 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Louis · Accepted Answer · 2021-11-15 10:08:46Z

Answer based on the comments.

the function call getName() at the end of the script calls the function right after it, even when the button hasn’t been pressed by the user. Therefore, it adds the empty value in the array since there is an empty value.

Just need to remove the getName().

const NameArr = [];
const IdArr = [];
Dict = {};

function getName() {
  const Input = document.getElementById("input").value;
  const list_names = Input.split(", ");

  for (let i of list_names) {
    NameArr.push(i);
    IdArr.push(i);
  };
  console.log(NameArr, IdArr);
};

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <script src="main.js" charset="utf-8" defer></script>
    <title></title>
  </head>
  <body>
    <form id="form" action="#" method="post">
      <input type="text" id="input">
      <button onclick="getName();">Get Data</button>
    </form>
  </body>
</html>

Collectives™ on Stack Overflow

getting extra value in JS array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related