javascript - 如何创建自动递增*包括另一个输入*按钮？

Question

我一直在寻找一个包含另一个输入引导输入组的片段，但我找不到一个，所以你不知道我自己编写了一个。

标签： javascripthtmlinputbootstrap-4code-snippets

Answer 1

    <style>
        .CENTERFORM {
            display: table;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
    <!-- Player And Score -->
    <div id="PLAYERCONTAINER">
        <div class="col-9 col-md-8 CENTERFORM my-3 text-center">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="">Player 1</span>
                </div>
                <input type="text" class="form-control" id="PLAYER_NAME">
                <div class="col-3">
                    <input type="number" class="form-control" id="PLAYER_SCORE">
                </div>
            </div>
            <button class="btn btn-outline-success" onclick="cloneThis(this,this.parentNode)">Another?</button>
        </div>
    </div>

    <script>
        // Autoincrement button for player names and scores
        let count = 1;

        function cloneThis(button, playerform) {
            const clone = playerform.cloneNode(playerform);
            const playerNameInput = clone.childNodes[1].childNodes[3].id = `PLAYER_NAME${count}`;
            const playerScoreInput = clone.childNodes[1].childNodes[5].childNodes[1].id = `PLAYER_SCORE${count++}`;
            console.log(playerScoreInput);
            button.remove();
            console.log("clicked");
            document.getElementById('PLAYERCONTAINER').append(clone);
        }
    </script>