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

Question

In continuation to Update an array with data from inputs .

Now I must put values into tmpARR array like:

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

The question is: how should I change guardarNumeros() for adding information in an array like:

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

Thanks for Pransh Tiwari who was edited my function guardarNumeros().

I was not be able to add snippet with my code because of stackoverflow's rules about too much code in the post so I wrote this phrase, sorry.

 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: Kresimir, I have tryied:

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

What I have got:

["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: What I have before insert:

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

What I desire after insert:

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

Answer 1

EDIT: I completely misunderstood the question. Here is an update:

Here is a minimalistic version of what I think you're trying to achieve:

 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

From my understanding of the problem this is the solution:

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

Also to add the value of text easily, add id to it.

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