仅使用纯javascript在单击按钮时动态生成表单输入字段递增和递减

Posted 2023-05-08

【中文标题】仅使用纯javascript在单击按钮时动态生成表单输入字段递增和递减

【英文标题】：Dynamically generate form input fileds increment and decrement on click of button using pure javascript only

【发布时间】：2019-10-02 03:38:47

【问题描述】：

ES6 /Pure javascript/ 无框架或 jquery/ Document.createElement() / Node.appendChild()enter image description here p>

制作一个 html 表单，用户必须在其中添加成员详细信息。尝试制作一个按钮，该按钮生成一个新的 set op 输入字段，并在 className/id 或占位符中增加，例如：第一个生成的输入应该有一个 className/id或 input1 的占位符，下一个带有 className/id 或 input2 的占位符，依此类推。

我创建了一个脚本，但它动态添加输入字段，但不会增加添加成员的计数。增量必须仅从 1 到 10 开始。

点击添加按钮时，必须添加输入字段，每次点击添加成员时计数必须增加，最​​多只能有 10 个成员。

点击删除按钮后，输入字段必须删除成员 输入字段减少计数。

 <div class="container ">
    <form action="">
        <input class="name" type="text" placeholder="Name">
        <input class="email" type="email" placeholder="Email" value="[e-mail]">
         <input class="phone" type="text" placeholder="Phone" value="8888888888">
        <div class="field">
            <div class="control">
                <button class="button addMember">
                    Add Member
                </button>
            </div>
            <div class="control">
                <button class="button delMember">
                    Delete Member
                </button>
            </div>
            <div class="control">
                <button class="button resetForm">
                    Reset
                </button>
            </div>
        </div>
    </form>
</div>
<section class="addinputs">
</section>
</div>


 <script>
    document.querySelector(".addMember").addEventListener('click', getAdd);
function getAdd(event) 
    event.preventDefault();
         var count=1;
          document.querySelector('.addinputs').innerHTML+=` 
          <div class="addedMember">
          <input class="name $count"  type="text" placeholder="Name $count">
            <input class="email $count"  type="email" placeholder="Email $count">
             <input class="phone $count"  type="text" placeholder="Phone $count">
          </div>    
            `;
count++;
        
</script>

【参考方案1】：

编辑：修复逻辑错误

这就是你要找的吗？

document.querySelector(".addMember").addEventListener('click', getAdd);
document.querySelector(".delMember").addEventListener('click', getDel);

//Count as a global variable, not local
var count=0;

function getAdd(event) 
    event.preventDefault();

    //Set a limit on count
    if(count <= 10) 
        document.querySelector('.addinputs').innerHTML+=` 
          <div class="addedMember">
          <input class="name $count"  type="text" placeholder="Name $count">
            <input class="email $count"  type="email" placeholder="Email $count">
             <input class="phone $count"  type="text" placeholder="Phone $count">
          </div>    
        `;
         count++;
    


function getDel(event) 
    event.preventDefault();

    //Dont let count go below 0
    if(count > 0) 
        //Retrieve array of all added members
        var added = document.getElementsByClassName("addedMember");

        //Retrieve the last of all added members
        var lastadded = added[added.length - 1];

        //Remove the last added member from the DOM
        lastadded.parentNode.removeChild(lastadded);
        count--;
    

【讨论】：

getAdd 函数不能与 if 语句一起使用，getDel 函数也不能正常工作，它会给出错误 undefine lastadded

抱歉，我对 if 语句进行了最后一秒的调整，并且使用了错误的运算符。我已编辑以解决此问题。至于 getDel 函数，您是否更改了 HTML 的工作方式？鉴于您提供的示例，它可以完美运行。