Javascript 根据值动态添加表单字段

在Django应用程序中，我有一个带有“rooms”字段的表单，它是整数字段。根据房间的数量，我想为每个房间生成另外两个字段“成人”和“儿童”。我在java脚本上看到了很多这样做的例子，所以我尝试自己编写脚本，但它不起作用。并且在浏览器上没有错误。我是java脚本的新手，你能告诉我我做错了什么吗

这是我的html文件

<div class="fieldWrapper">
    <label for="id_rooms">Rooms:</label>
    <input id="id_rooms" type="number" name="rooms" min="1">
</div>

谢谢你的帮助。

HTML-

<div class="fieldWrapper">
<label for="id_rooms">Rooms:</label>
<input id="id_rooms" type="number" name="rooms" min="1">
</div>

<div class="extrafieldWrapper">    
</div>

房间：

Javascript-

$(function() {

var newFields = $('');
$('#id_rooms').bind('blur keyup change', function() {
    var n = this.value || 0;
    if (n + 1) {
        if (n > newFields.length) {
            addFields(n);
        } else {
            removeFields(n);
        }
    }
});

function addFields(n) {
    for (form_num = newFields.length; form_num < n; form_num++) { // lenght->length
        $("input[id='id_form-TOTAL_FORMS']").attr('value', form_num + 1);
        $(".extrafieldWrapper").append("<br/><label for='id_form-" + form_num + "-adult'>Adult:</label> <input id='id_form-" + form_num + "-adult' type='number' name='form-" + form_num + "-adult'/> <label for='id_form-" + form_num + "-children'>Children:</label> <input id='id_form-" + form_num + "-children' type='number'  name='form-" + form_num + "-children'/> ");
    }
}

function removeFields(n) {
    var removeField = newFields.slice(n).remove();
    newFields = newFields.not(removeField);
}
} );

$（函数（）{
var newFields=$（''）；
$（'id_rooms'）.bind（'blur keyup change'，function（）{
var n=this.value | | 0；
如果（n+1）{
如果（n>newFields.length）{
addFields（n）；
}否则{
移除字段（n）；
}
}
});
函数addFields（n）{
对于（form_num=newFields.length；form_numlength
$（“input[id='id\u form-TOTAL\u FORMS']”）attr（'value'，form\u num+1）；
$（“.extrafieldWrapper”）.append（
成人：儿童：”；
}
}
函数removeFields（n）{
var removeField=newFields.slice（n.remove（）；
newFields=newFields.not（removeField）；
}
} );

HTML

房间：

JS

$（函数（）{
var newFields=$（''）；
$（'id_rooms'）.bind（'blur keyup change'，function（）{
var n=this.value | | 0；
如果（n+1）{
如果（n>newFields.length）{
addFields（n）；
}否则{
移除字段（n）；
}
}
});
函数addFields（n）{
对于（form_num=newFields.length；form_numlength
$（“input[id='id\u form-TOTAL\u FORMS']”）attr（'value'，form\u num+1）；
$（“.extrafieldWrapper”）.append（
成人：儿童：”；
}
}
函数removeFields（n）{
$（'.extrafieldWrapper'）.html（''）；
}
});

---

这里有一个问题：

您似乎也在使用JQuery。你给图书馆添加了一些参考资料了吗？这是什么

var newFields=$（''）？newFields.lenght->lengthIt创建一个新的空jquery变量。我还没有阅读代码，但是您可能还应该将其包装成$（document.ready）（function（）{code}）；为了确保DOM在您开始操作时已经加载。
$(function() {

var newFields = $('');
$('#id_rooms').bind('blur keyup change', function() {
    var n = this.value || 0;
    if (n + 1) {
        if (n > newFields.length) {
            addFields(n);
        } else {
            removeFields(n);
        }
    }
});

function addFields(n) {
    for (form_num = newFields.length; form_num < n; form_num++) { // lenght->length
        $("input[id='id_form-TOTAL_FORMS']").attr('value', form_num + 1);
        $(".extrafieldWrapper").append("<br/><label for='id_form-" + form_num + "-adult'>Adult:</label> <input id='id_form-" + form_num + "-adult' type='number' name='form-" + form_num + "-adult'/> <label for='id_form-" + form_num + "-children'>Children:</label> <input id='id_form-" + form_num + "-children' type='number'  name='form-" + form_num + "-children'/> ");
    }
}

function removeFields(n) {
    var removeField = newFields.slice(n).remove();
    newFields = newFields.not(removeField);
}
} );

<div class="fieldWrapper">
    <label for="id_rooms">Rooms:</label>
    <input id="id_rooms" type="number" name="rooms" min="1">
</div>
<div class="extrafieldWrapper"></div>

$(function() {

var newFields = $('');
$('#id_rooms').bind('blur keyup change', function() {
    var n = this.value || 0;
    if (n + 1) {
        if (n > newFields.length) {
            addFields(n);
        } else {
            removeFields(n);
        }
    }
});

function addFields(n) {
    for (form_num = newFields.length; form_num < n; form_num++) { // lenght->length
        $("input[id='id_form-TOTAL_FORMS']").attr('value', form_num + 1);
        $(".extrafieldWrapper").append("<br/><label for='id_form-" + form_num + "-adult'>Adult:</label> <input id='id_form-" + form_num + "-adult' type='number' name='form-" + form_num + "-adult'/> <label for='id_form-" + form_num + "-children'>Children:</label> <input id='id_form-" + form_num + "-children' type='number'  name='form-" + form_num + "-children'/> ");
    }
}

function removeFields(n) {
    $('.extrafieldWrapper').html('');
}

});