Question

延续到Update an array with data from inputs。

现在我必须将值放入tmpARR数组中，例如：

emacs -q

问题是：我应该如何更改guardarNumeros（）以便在数组中添加信息：

var count = 0;
var tmpARR = ["count++", "text value from text input", "value from input Num 1", "0", "value from input Num 2", "Just some default text"];

感谢Pransh Tiwari，他已经编辑了我的函数guardarNumeros（）。

由于帖子中关于代码过多的规则，我无法在代码中添加代码段，抱歉，我写了这句话。

var tmpARR = ["count++", "text value from text input", "value from input Num 1", "0", "value from input Num 2", "Just some default text"];

var totalInputs;
var myInputs;
var tmpARR = [];
var count = 0,
    types = ['t', 'C' /*, 'Q'*/ ],
    button = document.getElementById('button');

button.addEventListener("click", createInputs, false);

function createInputs() {
  if (!validInput()) {
    return;
  }
  count += 1;
  createInput(count);
}

function createInput(count) {
  totalInputs = document.getElementsByClassName('myInput').length;
  var existingNode = document.getElementsByClassName('myInput')[totalInputs - 1];

  types.forEach(function(type) {
    var newNode = existingNode.cloneNode();
    newNode.value = null;
    newNode.id = type + +count;
    newNode.placeholder = 'Placeholder ' + type;
    newNode.dataset.id = 'id' + count;
    appendNode(newNode);

  })
}

function appendNode(node) {
  document.querySelector('#div').appendChild(node);
}

function validInput() {
  myInputs = document.getElementsByClassName('myInput');
  var valid = true;

  Array.prototype.slice.call(myInputs).forEach(function(input) {

    input.classList.remove('error');
    if (!input.value) {
      input.classList.add('error');
      valid = false;
    }
  });

  return valid;
}

function removeError(event) {
  event.classList.remove('error');
}

function guardarNumeros() {
boxvalue = document.getElementsByClassName('myInput');
i = 0;
while (i < boxvalue.length) {
    if (boxvalue[i].type == "number") {
        if (boxvalue[i+1] && boxvalue[i+1].type == "number") {
            tmp = [boxvalue[i].value, boxvalue[i+1].value]
            tmpArr.push(tmp);
            i+=2;
        }
    } else {
        i++;
    }
}
console.log(tmpArr);
return false;
}

#title {
  font-family: 'Times New Roman', Times, serif;
  font-size: 200%;
}

#step {
  font-size: 15pt;
  clear: both;
}

#step2 {
  font-size: 15pt;
  clear: both;
}

#step3 {
  font-size: 15pt;
  clear: both;
}

summary {
  background: #009688;
  color: #fff;
  padding: 5px;
  margin-bottom: 3px;
  text-align: left;
  cursor: pointer;
  padding: 5px;
  width: 250px;
  /*background-color: #4CAF50;*/
}

summary:hover {
  background: #008999;
}

.displayBlockInline-Flex {
  display: inline-flex;
}

#margin20 {
  margin-left: 20px;
  vertical-align: middle;
}

#container {
  width: auto;
  height: auto;
  margin: 0 auto;
  display: none;
}

a.myButton {
  color: #fff;
  /* цвет текста */
  text-decoration: none;
  /* убирать подчёркивание у ссылок */
  user-select: none;
  /* убирать выделение текста */
  background: rgb(212, 75, 56);
  /* фон кнопки */
  outline: none;
  /* убирать контур в Mozilla */
  text-align: center;
  cursor: pointer;
  width: 150px;
  padding-bottom: 11px;
}

a.myButton:hover {
  background: rgb(232, 95, 76);
}


/* при наведении курсора мышки */

a.myButton:active {
  background: rgb(152, 15, 0);
}


/* при нажатии */

.button1 {
  /*    background-color: #fc0; /* Цвет фона слоя */
  /*    padding: 5px; /* Поля вокруг текста */
  float: left;
  /* Обтекание по правому краю */
  width: 450px;
  /* Ширина слоя */
}

.button2 {
  /*    background-color: #c0c0c0; /* Цвет фона слоя */
  /*    padding: 5px; /* Поля вокруг текста */
  width: 650px;
  /* Ширина слоя */
  float: right;
  /* Обтекание по правому краю */
}

.clear {
  clear: left;
  /* Отмена обтекания */
}

.wrapper {
  width: 1100px;
  margin-left: 20px;
}


/*inputs*/

#div {
  text-align: center;
}

.myInput {
  height: 40px;
  outline: none;
  width: auto;
  border: 1px solid #999;
  border-radius: 4px;
  padding: 5px 10px;
  margin: 5px;
  display: inline-block;
}

.myInput.error {
  border: 1px solid red;
}

#action {
  margin: 10px 0;
  text-align: center;
}

#button {
  width: 190px;
  height: 40px;
  background: #009688;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  border-radius: 4px;
  border: none;
  /*           text-transform: uppercase;*/
  outline: none;
  cursor: pointer;
}

#button:hover {
  background: #008999;
}

更新1： 克雷西米尔，我已经试过了：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<center>
  <input type="text" class="myInput" name="nameAlloy" placeholder="Name">
</center>
<div id="div">
  <!--<form onsubmit="return guardarNumeros()">-->
  <div id="action">
    <button type="button" id="button">Add more inputs</button>
  </div>
  <input type="number" onkeypress="removeError(this)" class="myInput" data-id="id0" name="value[]" placeholder="Enter value 1">
  <input type="number" onkeypress="removeError(this)" class="myInput" data-id="id0" name="value[]" placeholder="Enter value 2">

  <div id="action">
    <input type="submit" id="button" value="Add to array">
  </div>
  <!--</form>-->
</div>

我所拥有的：

function guardarNumeros() {
    boxvalue = document.getElementsByClassName('myInput');
    i = 0;
    var count = 0;
    while (i < boxvalue.length) {
        if (boxvalue[i].type == "number") {
            if (boxvalue[i+1] && boxvalue[i+1].type == "number") {

                tmp = [boxvalue[i].value, boxvalue[i+1].value]
                tmp = rowsText.splice("Text", "Text", tmp[1], 0, tmp[2], "text");
                rowsText.push(tmp);
                i+=2;
            }
        } else {
            i++;
        }
    }
    console.log(rowsText);
    return false;
}

更新2：我插入之前的内容：

["1", 0, undefined, "text", Array(6), Array(6), Array(6), Array(6), Array(0)]0: "1"1: 02: undefined3: "text"4: (6) ["1", "X5CrNi18", "0", "55", "0", "Steel"]5: (6) ["2", "X5CrNi18", "100", "55", "0.5", "Steel"]6: (6) ["6", "S355J2Q +Z35", "100", "20", "0.68", "Steel"]7: (6) ["8", "S355J2Q +Z35", "300", "20", "0.3", "Steel"]8: []length: 9__proto__: Array(0)

插入后我需要什么：

[
["1", "X5CrNi18", "0", "55", "0", "Steel"],
["2", "X5CrNi18", "100", "55", "0.5", "Steel"],
["6", "S355J2Q +Z35", "100", "20", "0.68", "Steel"],
["8", "S355J2Q +Z35", "300", "20", "0.3", "Steel"],
]

Answer 1

编辑：我完全误解了这个问题。这是一个更新：

以下是我认为您要实现的目标的简约版本：

document.getElementById("button1").addEventListener("click", () => { button1_clicked(); });
document.getElementById("button2").addEventListener("click", () => { button2_clicked(); });

let inputs = document.querySelectorAll("#container input[type='text']");

const container = document.getElementById("container");

const main_array = [];

function button1_clicked() {
  const temp_array = [];
  for (i of inputs) {
    temp_array.push(i.value);
  }
  main_array.push(temp_array);
  console.log("main_array = ", main_array);
}

function button2_clicked() {
  container.innerHTML += `<br>
<input type="text" value="test">
<input type="text" value="test">`;
  inputs = document.querySelectorAll("#container input[type='text']");
}

<div id="container">
<input type="text" value="test1">
<input type="text" value="test2">
</div>
<button id="button1">Add to array</button>
<button id="button2">Add more inputs</button>

Answer 2

根据我对问题的了解，这是解决方案：

function guardarNumeros() {
    boxvalue = document.getElementsByClassName('myInput');
    i = 0;
    count = 0;
    defaultText = "Steel"
    while (i < boxvalue.length) {
        if (boxvalue[i].type == "number") {
            if (boxvalue[i+1] && boxvalue[i+1].type == "number") {
                textValue = document.getElementById('nameAlloy').value;
                tmp = [count, textValue, boxvalue[i].value, 0, boxvalue[i+1].value, defaultText]
                tmpARR.push(tmp);
                i+=2;
                count++;
            }
        } else {
            i++;
        }
    }
    console.log(tmpARR);
    return false;
}

要轻松添加文本的值，请向其添加ID。

<input type="text" class="myInput" name="nameAlloy" id="nameAlloy" placeholder="Name" >

将输入中的值推入数组中的某些位置

2 个答案: