將輸入中的值推入數組中的某些位置

Question

繼續使用輸入的數據更新數組 。

現在，我必須將值放入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"];

問題是：我應該如何更改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（）。

由於帖子中關於過多代碼的規則，我無法在代碼中添加代碼段，所以我寫了這句話，對不起。

 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，我試過了：

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

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