Как создать автоматически увеличивающуюся кнопку * включить другой ввод *?

#javascript #html #input #bootstrap-4 #code-snippets

#javascript #HTML #ввод #bootstrap-4 #фрагменты кода

Вопрос:

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

Ответ №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>