函式創建不需要的陣列副本作為自身的元素-有解無憂

基本上，我有一個函式可以根據用戶選擇創建 N 個輸入欄位，然后我想獲取這些輸入以供以后處理，盡管由于某種原因它會一遍又一遍地創建回傳的副本，除非我添加類似“ conj.pop()" 在回傳中。我不想作業，不知道為什么只有當我彈出最后一個時它才有效。

我放了一個 console.log 來跟蹤，回傳的陣列是這樣的：

陣列（3）
0：'A'1
：'B'2
：（3）['A'，'B'，'陣列（3）]

如果你擴展最后一個陣列，它會無限重復這個相同的描述。

OBS：我一直使用的輸入是簡單的 2,2 和 AB、C D。
OBS2：代碼以前不是英文的，所以我翻譯了一些東西，而留下了其他小的東西，因為它們只是變數。

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>

uj5u.com熱心網友回復：

請按如下方式更改您的JS：

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);
  };
};

我只洗掉了 conjE.push() 和 conjC.push()。

解釋：

您正在傳遞一個陣列以將資料存盤在其中。但是您也回傳了相同的陣列并再次將其存盤在其中。這會創建一個無限回圈的值。傳遞變數或回傳串列。

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/505176.html

標籤：javascript html

上一篇：沒有錯誤，但chrome擴展在控制臺中沒有輸出

下一篇：使用資料目標更改類