All of my var statements uses identifiers:

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

So why am I getting a null error? I ran this code in the Javascript runner and got the null error message. And in my browsers Firefox and Chrome I don't get any errors or warnings. When I run the code in the browser and click the button to activate the event handler, the form clears. It's not going to a server anyway. It's just practice. I'm taking a course in javascript and Dynamic HTML. If anybody cares to look at my code and tell me what I'm doing wrong I'd appreciate it. There's got to be something that I'm not getting right. Here is the script:

script

<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>

blade

<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>

CodePudding user response：

Your field_id is of the form filter_field-n and there is no element with that id(which is why you get the null), there is however select with id of the form field-n, if this is the field you're trying to get the value of you can just use the count value to get it without doing the string manipulation.

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