Вставить значения из входов в определенных позициях в массиве - PullRequest
Новая
       0

Вставить значения из входов в определенных позициях в массиве

0 голосов
/ 09 декабря 2018

В продолжение Обновление массива с данными из входных данных .

Теперь я должен поместить значения в массив tmpARR, например: 

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"];

Вопросis: как мне изменить guardarNumeros () для добавления информации в массив, например: 

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 ().

Я быля не могу добавить фрагмент с моим кодом из-за правил stackoverflow о слишком большом количестве кода в посте, поэтому я написал эту фразу, извините. 

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

upd 1: Кресимир, я попробовал: 

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

Что у меня есть: 

["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)

upd 2: Что у меня есть до вставки: 

[
["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"],
]

Что я хочу после вставки: 

     var count = 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"],
        ["count++", "text value from text input", "value from input Num 1", "0", "value from input Num 2", "Just some default text"],
        ["count++", "text value from text input", "value from the next input Num 1", "0", "value from the next input Num 2", "Just some default text"]
]

Ответы [ 2 ]

0 голосов
/ 09 декабря 2018

Исходя из моего понимания проблемы, это решение: 

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

Также, чтобы легко добавить значение текста, добавьте к нему идентификатор. 

<input type="text" class="myInput" name="nameAlloy" id="nameAlloy" placeholder="Name" >
0 голосов
/ 09 декабря 2018

РЕДАКТИРОВАТЬ: Я полностью неправильно понял вопрос.Вот обновление:

Вот минималистичная версия того, чего, я думаю, вы пытаетесь достичь: 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...