Function creates unwanted copy of an array as an element of itself

September 6, 2022

Basically, I have a function that creates N input fields based on user choice, then I want to get those inputs for processing later on, though for some reason it creates a copy of the return over and over again, unless I add something like "conj.pop()" in the return. I wouldn’t like to work not knowing why it only works if I pop the last one.

I put a console.log to keep track and the returned array was something like this:

Array(3)

0: ‘A’

1: ‘B’

2: (3) [‘A’,’B’,’Array(3)]

If you expand this last array it repeats infinitely this very same description.

OBS: The inputs I’ve been using were simple 2,2 and A B, C D.

OBS2: The code wasn’t previously in english so I translated some stuff, and left other small ones as they were variables only.

document.getElementById("ok1").onclick = () => {

  const esp_qtd = document.getElementById("esp_qtd").value;
  const car_qtd = document.getElementById("car_qtd").value;

  document.getElementById("parte1").classList.add("invisivel");
  document.getElementById("parte2").classList.remove("invisivel");

  console.log(esp_qtd, car_qtd);

  const generateFields = (tipo) => {
    const qtd = document.getElementById(tipo + "_qtd").value;
    const parent = document.getElementById(tipo + "_lista");

    for (let i = 0; i < qtd; i++) {
      const input = document.createElement("input");
      input.setAttribute("type", "text");
      input.setAttribute("id", (tipo + i));
      parent.appendChild(input);

      if (qtd > 5) {
        if (((i + 1) % 3) == 0) parent.appendChild(document.createElement("br"));
      }

      console.log(i);
    }
  }

  generateFields("esp");
  generateFields("car");

  const inputFields = (tipo, conj) => {
    const qtd = document.getElementById(tipo + "_qtd").value;
    for (let i = 0; i < qtd; i++) {
      conj[i] = document.getElementById(tipo + i).value;
      console.log("Iteration: " + i, conj);
    }

    return conj;
  }

  document.getElementById("ok2").onclick = () => {
    const conjE = [];
    const conjC = [];

    conjE.push(inputFields("esp", conjE));
    conjC.push(inputFields("car", conjC));

    console.log(conjE);
    console.log(conjC);
  }
}

* {
  font-family: 'Roboto', sans-serif;
  font-size: 14pt;
  margin-top: 1rem;
}

.invisivel {
  display: none;
}

label {
  margin-top: 1rem;
}

input {
  margin-top: 0.5rem;
  margin-right: 1rem;
  margin-bottom: 0.5rem;
}

button {
  margin-top: 1rem;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOC</title>
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>

<body>

  <div class="container">

    <!-- PART 1 -->

    <div id="parte1">
      <form>
        <label>N1</label><br>
        <input type="text" id="esp_qtd"><br>
        <label>N2</label><br>
        <input type="text" id="car_qtd"><br>
        <button id="ok1" type="button">OK</button>
      </form>
    </div>

    <!-- PART 2 -->

    <div id="parte2" class="invisivel">
      <div id="esp_lista">
        <label>ELEMENTS 1</label><br>
      </div>

      <div id="car_lista">
        <label>ELEMENTS 2</label><br>
      </div>
      <button id="ok2" type="button">OK</button>
    </div>

  </div>

  <script src="index.js"></script>
</body>

</html>

>Solution :

Please change your JS as follows:

document.getElementById("ok1").onclick = () => {
  const esp_qtd = document.getElementById("esp_qtd").value;
  const car_qtd = document.getElementById("car_qtd").value;

  document.getElementById("parte1").classList.add("invisivel");
  document.getElementById("parte2").classList.remove("invisivel");

  console.log(esp_qtd, car_qtd);

  const generateFields = (tipo) => {
    const qtd = document.getElementById(tipo + "_qtd").value;
    const parent = document.getElementById(tipo + "_lista");

    for (let i = 0; i < qtd; i++) {
      const input = document.createElement("input");
      input.setAttribute("type", "text");
      input.setAttribute("id", tipo + i);
      parent.appendChild(input);

      if (qtd > 5) {
        if ((i + 1) % 3 == 0) parent.appendChild(document.createElement("br"));
      }

      console.log(i);
    }
  };

  generateFields("esp");
  generateFields("car");

  const inputFields = (tipo, conj) => {
    const qtd = document.getElementById(tipo + "_qtd").value;
    console.log("Conj:" + qtd);
    for (let i = 0; i < qtd; i++) {
      conj[i] = document.getElementById(tipo + i).value;
      console.log("Iteration: " + i, conj);
    }

    return conj;
  };

  document.getElementById("ok2").onclick = () => {
    const conjE = [];
    const conjC = [];

    inputFields("esp", conjE);
    inputFields("car", conjC);

    console.log(conjE);
    console.log(conjC);
  };
};

I have only removed conjE.push() and conjC.push().

Explanation:

You are passing an array to store your data in it. But you’re also returning the same array and storing it in it again. This creates an infinite loop of values. Either pass the variable or return the list.