如何使用vannilajs根据先前输入实时在html中制作动态表单答案

【问题标题】：How to make dynamic form in html based on previous input in realtime using vannilajs如何使用vannilajs根据先前输入实时在html中制作动态表单
【发布时间】：2020-10-13 16:56:53
【问题描述】：

我有一个这样的表格，它会根据在这个表格中输入的总值生成表格的数量

<form>
    <input type="Number" name="delivery">
</form>

例如，如果用户填写输入 3，它将实时自动生成 3 个新表单

<form>
    <input type="Number" name="delivery">
    <input type="text" name="destination">
    <input type="text" name="destination">
    <input type="text" name="destination">
</form>

我的应用程序不使用 jquery，所以我必须在 vanilla js 中执行此操作。请指导我这样做

【问题讨论】：

标签： javascript html node.js forms input

【解决方案1】：

这样的事情可能会做到：

const input = document.getElementById('delivery');
const form = document.getElementById('form');

input.addEventListener('change', () => {
    form.innerHTML = '';

    for (i = 0; i < parseInt(input.value); i++) {
        let formInput = document.createElement('input');
        formInput.setAttribute('type', 'text')
        formInput.setAttribute('name', 'destination');
        form.appendChild(formInput);
    }
})

<input type="Number" id="delivery">



<form id="form">

</form>

当数字发生变化时，将相应地添加输入。

【讨论】：

如果数字变为0，它将删除创建的输入，如果数字发生变化，它将根据当前数字生成
哦，我明白了..因为我做了一点修改。现在一切都好..我将添加事件侦听器的事件更改为（'input'）而不是（'change'）以获得更实时的节目的输入.. :) ..实际上我已经尝试使用for循环但我忘记将输入数字解析为 int 并导致输出混乱。谢谢你，兄弟。

【解决方案2】：

你可以使用

let inputElem = document.createElement('input');

创建新的输入元素和

document.querySelector('form').appentChild(inputElem);

将这个新的输入元素追加到父表单

您可以使用 for 循环创建任意数量的元素

这样

<form> 
<input type="Number" name="delivery" onchange="createInput(this)"> 
<div id='dynamic'>
</div>
</form>

<script>

function createInput(elem){
     const container = document.getElementById('dynamic');
     container.innerHTML = '';
     const count = elem.value;
     for(let i= 0; i< count;i++){
        const newInput = document.createElement('input'); container.appendChild(newInput);
     }
}

</script>

【讨论】：

我想让它根据类型号输入中的值自动实时渲染
是的，你可以做到
:( 我不知道该怎么做/.. 例如 addeventlistener('click') 是否有 addeventlistener('filled') 的事件，它会执行操作
或者你可以使用onkeyup事件