Ajax 未捕获类型错误：document.getElementById(...) 为空

Question

我所有的 var 语句都使用标识符：

function addChildFilter(id1, id2) {
    let field_id = id1.replace('div', 'field');
    let field = document.getElementById(field_id).value;
    alert(field);
}

那么为什么我得到一个空错误？我在 Javascript 运行器中运行此代码并收到空错误消息。在我的浏览器 Firefox 和 Chrome 中，我没有收到任何错误或警告。当我在浏览器中运行代码并单击按钮以激活事件处理程序时，表单会清除。无论如何，它不会去服务器。这只是练习。我正在学习 javascript 和动态 HTML 课程。如果有人愿意查看我的代码并告诉我我做错了什么，我将不胜感激。一定有什么我做错了。这是脚本：

脚本

<script>
    $('#category_id').change(function() {
        let category_id = document.getElementById('category_id').value;
        window.location = '{{ route('filters.create') }}?category_id=' + category_id;
    });
    $('#addFilter').click(function () {
        let count = document.getElementsByClassName('filter').length + 1;
        let id1 = "'"+'filter_div-'+count+"'";
        let id2 = count;
        let id3 = 'filter-'+count;
        let html = '<div id="filter_div-'+count+'" class="filter position-relative">'+
            '<i class="fas fa-times text-danger position-absolute end-0 cursor-pointer"></i>' +
            '<div class="row">'+
            '<div class="col-md-4 mb-3">'+
            '<label for="name-'+count+'" class="form-label">نام فیلتر</label>'+
            '<input type="text" id="name-'+count+'" class="form-control" name="filters['+count+'][name]">'+
            '</div>'+
            '<div class="col-md-4 mb-3">'+
            '<label for="latin-'+count+'" class="form-label">نام لاتین فیلتر</label>'+
            '<input type="text" id="latin-'+count+'" class="form-control" name="filters['+count+'][latin]">'+
            '</div>'+
            '<div class="col-md-4 mb-3">'+
            '<label for="field-'+count+'" class="form-label">انتخاب فیلد</label>'+
            '<select id="field-'+count+'" class="form-select" name="filters['+count+'][field]">'+
            '<option value="1">چک باکس</option>'+
            '<option value="2">رنگ</option>'+
            '<option value="3">آپشن</option>'+
            '</select>'+
            '</div>'+
            '</div>'+
            '<div class="w-100 text-center">'+
            '<p>زیر گروه دیگری را اضافه کنید.</p>'+
            '<a onclick="addChildFilter('+id1+', '+id2+')" class="bg-danger text-info pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">'+
            '<i class="fas fa-plus"></i>'+
            '</a>'+
            '</div>'+
            '</div>';
        $('#showFilters').append(html);
    });
    function addChildFilter(id1, id2) {
        let field_id = id1.replace('div', 'field');
        let field = document.getElementById(field_id).value;
        alert(field);
    }
    $(document).on('click', '.fa-times', function() {
        $(this).parent().remove();
    });
</script>

刀片

<div class="container-fluid">
    <div class="row">
        <div class="me-auto fw-bold fs-3 col-md-3 mb-3">
            <span class="me-2"><i class="fas fa-filter"></i></span>
            <span>@yield('title')</span>
        </div>
        <form action="{{ route('filters.store') }}" method="post">
            <div class="d-flex justify-content-center">
                <div class="col-md-6 mb-3">
                    <label for="category_id">انتخاب سر دسته</label>
                    <select class="form-control selectpicker" title="چیزی انتخاب نشده است." id="category_id" name="category_id" data-live-search="true">
                        @foreach($categories as $id => $name)
                            @isset($category_id)
                                <option value="{{ $id }}" {{ $category_id == $id ? 'selected' : '' }}>{{ $name }}</option>
                            @else
                                <option value="{{ $id }}">{{ $name }}</option>
                            @endisset
                        @endforeach
                    </select>
                </div>
            </div>
        </form>
        @isset($category_id)
            <div class="d-flex justify-content-center">
                <form class="col-md-10" method="post" action="{{ route('filters.store') }}">
                    <div id="showFilters">
                        {{-- GROUP --}}
                    </div>
                    <div class="w-100 text-center mt-4">
                        <p>گروه دیگری را اضافه کنید.</p>
                        <a id="addFilter" class="bg-primary text-white pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">
                            <i class="fas fa-plus"></i>
                        </a>
                    </div>
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <button type="submit" class="btn btn-success">ذخیره</button>
                        </div>
                    </div>
                </form>
            </div>
        @endisset
    </div>
</div>

Answer 1

您的 field_id 的形式为 filter_field-n，并且没有具有该 id 的元素（这就是您得到 null 的原因），但是如果这是您的字段，则选择具有形式 field-n 的 id重新尝试获取的值可以只使用计数值来获取它而不进行字符串操作。

function addChildFilter(id1, id2) {
    let field_id = 'field-' + id2;
    let field = document.getElementById(field_id).value;
    alert(field);
}