如何使用javascript插入和獲取動態創建的輸入字段的值？

Question

我正在根據單擊的單選按鈕動態創建輸入，但在獲取輸入字段中插入的值時遇到問題。 我需要打印插入到也是動態創建的標簽字段中的值。 它看起來像這樣： https : //codepen.io/christmasrex/pen/jOmxmQY

因此，如果選擇了數字 4，則會創建 4 個輸入字段，並且在第 3 列中我需要打印輸入字段中插入的值。

這是代碼：

<div class="row">
    <div class="column">
        <h2>Column 1</h2>

        <div>
            <input type="radio" value="1" name="col1"><label for="1">1</label>
            <input type="radio" value="2" name="col1"><label for="2">2</label>
            <input type="radio" value="3" name="col1"><label for="3">3</label>
            <input type="radio" value="4" name="col1"><label for="4">4</label>
            <input type="radio" value="5" name="col1"><label for="5">5</label>
        </div>

        <button type="button">Add</button>
    </div>

    <div class="column" style="background-color:#ccc;">
        <h2>Column 2</h2>
        <div class="add-input"></div>
    </div>

    <div class="column">
        <h2>Column 3</h2>
        <div class="add-label"></div>
    </div>
</div>

.column {
    float: left;
    width: 30%;
    padding: 10px;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

#col2 {
    display: none;
}

var inputDiv = document.getElementsByClassName("add-input")[0];
var inputLabel = document.getElementsByClassName("add-label")[0];
var btn = document.querySelector('button[type="button"]');

btn.onclick = function () {
    var radioCheckedNum = document.querySelector('input[type="radio"]:checked')
    .value;

    for (let i = 0; i < radioCheckedNum; i++) {
        var inputFieldValue;
        inputDiv.innerHTML += `<input type="text" id="" value="" name="col2" onChange="${inputFieldValue}"><br><br>`;
        inputFieldValue = document.querySelector('input[name="col2"]').value;
        
        console.log(inputFieldValue);
        
        inputLabel.innerHTML += `<label>Label ${radioCheckedNum} - ${inputFieldValue}</label><br><br>`;
    }
};

Answer 1

請檢查以下注釋代碼：

 // GET ELEMENTS MORE EFFICIENTLY BY USING IDs. const inputs = document.getElementById('add-input'); const labels = document.getElementById('add-label'); const button = document.getElementById('button'); const radios = document.querySelectorAll('input[type="radio"]'); // CREATE UTILITY FUNCTION TO CLEAR ALL CHILDREN FROM A NODE. const clear = (node) => { while (node.firstChild) { node.removeChild(node.lastChild); } }; const onClickHandler = () => { // CLEAR PREVIOUS ELEMENTS (REMOVE IF NOT NEEDED). clear(inputs); clear(labels); // GET CHECKED RADIO IN A MORE EFFICIENT WAY (WITHOUT QUERYING THE DOM AGAIN). const radio = Array.from(radios).find((input) => input.checked); // DO NOTHING IF NO RADIO IS CHECKED. if (!radio) { return; } // GET NUMBER OF INPUTS. const number = parseInt(radio.value); for (let i = 0; i < number; i++) { const index = i; /* NEVER USE 'innerHTML' BECAUSE IT IS NOT SAFE! INSTEAD, CREATE ELEMENTS PROGRAMMATICALLY USING DOM APIs AS FOLLOWS */ const input = document.createElement('INPUT'); const label = document.createElement('LABEL'); // SET INPUT ATTRIBUTES. input.name = `${index}`; input.type = 'text'; // ADD EVENT LISTENER TO EACH INPUT. input.addEventListener('input', ({target}) => { /* THIS CALLBACK WILL BE FIRED FOR EACH INPUT INDEPENDENTLY. HERE YOU CAN LEVERAGE 'label' REFERENCE TO CHANGE THE CORRESPONDING INNER TEXT. */ label.innerText = `Label ${index} - "${target.value}"`; }); // SET LABEL ATTRIBUTES. label.innerText = `Label ${index} - ""`; // ADD CREATED INPUT TO DOM AND SOME 'br' ELEMENTS. inputs.append( ...[ input, document.createElement('BR'), document.createElement('BR') ] ); // ADD CREATED LABEL TO DOM AND SOME 'br' ELEMENTS. labels.append( ...[ label, document.createElement('BR'), document.createElement('BR') ] ); } }; // ADD EVENT LISTENER TO BUTTON USING THE NEWEST API (RECOMMENDED). button.addEventListener('click', onClickHandler);

 .column { float: left; width: 30%; padding: 10px; } .row:after { content: ""; display: table; clear: both; }

 <div class="row"> <div class="column"> <h2>Column 1</h2> <div> <input type="radio" value="1" name="col1"><label for="1">1</label> <input type="radio" value="2" name="col1"><label for="2">2</label> <input type="radio" value="3" name="col1"><label for="3">3</label> <input type="radio" value="4" name="col1"><label for="4">4</label> <input type="radio" value="5" name="col1"><label for="5">5</label> </div> <button id="button">Add</button> </div> <div class="column" style="background-color:#ccc;"> <h2>Column 2</h2> <div id="add-input"></div> </div> <div class="column"> <h2>Column 3</h2> <div id="add-label"></div> </div> </div>