При нажатии кнопки идет создание поля для ввода данных

Question

Делаю сайт на конструкторе WIX и не могу реализовать следующий функционал: При нажатии кнопки должно создаваться поле для ввода данных. Хочу добавить этот функционал с помощью кода, но знаний 0. Может кто подскажет чего? Пример как это должно быть и работать по ссылке с видео https://disk.yandex.ru/i/3dHrWX15fDm6KQ

Answer 1

Надеюсь это вам поможет ^-^

const blockAdd  = document.querySelector(".block-btn-add");
    const buttonAdd = document.querySelector(".btn-add-person");

    buttonAdd.addEventListener("click", function(){
        let createDiv = document.createElement("div");
        let createInput = document.createElement("input");
        let createSelect = document.createElement("select");
        let createOption1 = document.createElement("option");
        let createOption2 = document.createElement("option");
        let createButton = document.createElement("button");

        createDiv.className = "block-person";
        createInput.className = "input";
        createSelect.className = "select";
        createInput.setAttribute("type", "text");

        createOption1.innerHTML = "Text 1";
        createOption2.innerHTML = "Text 2";
        createOption1.setAttribute("value", "1");
        createOption2.setAttribute("value", "2");

        createButton.className = "btn-save";
        createButton.setAttribute("type", "text");
        createButton.innerHTML = "Save";

        createSelect.appendChild(createOption1);
        createSelect.appendChild(createOption2);
        createDiv.appendChild(createInput);
        createDiv.appendChild(createSelect);
        createDiv.appendChild(createButton);

        blockAdd.parentElement.appendChild(createDiv);

        buttonAdd.disabled = true;
        var buttonSave = document.querySelector(".btn-save");
        buttonSave.addEventListener("click", save);
    })

    function save(){
        buttonAdd.disabled = false;
        this.parentElement.classList.add("block-save");

        let input = this.parentElement.querySelector(".input");
        let select = this.parentElement.querySelector(".select");

        let createDiv = document.createElement("div");
        let createDivName = document.createElement("div");
        let createDivRole = document.createElement("div");

        createDivName.className = "block-name";
        createDivName.innerHTML = input.value;
        createDiv.appendChild(createDivName);

        createDivRole.className = "block-name";
        createDivRole.innerHTML = select.options[select.selectedIndex].text;
        createDiv.appendChild(createDivRole);

        createDiv.className = "block-save";
        blockAdd.parentElement.appendChild(createDiv);

        this.parentElement.remove();
    }

body{
        width: 100%;
        min-height: 100vh;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .container{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .btn{
        padding: 12px 24px;
        border: 1px solid #000;
        cursor: pointer;
    }

    .block-btn-add{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .block-person{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .block-person > *{
        margin: 6px;
        padding: 6px 12px;
    }

    .block-save{
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 200px;
    }

<div class="container">
    <div class="block-btn-add"><button class="btn btn-add-person">Add</button></div>
</div>

БЛОГ НА HUSL

При нажатии кнопки идет создание поля для ввода данных

Ответы (1 шт):