Why do my event listeners not work in html and javascript

Question

I am trying to create a search form for my website. I am using jquery to add expression to Html elements in order to allow them to modify form inputs. This would allow for the form to customize the Searches. However, none of these sectors seem to work. I have tried changing the selectors' expressions and they still did not work. How can I fix this code.

const range = (start, stop, step = 1) => Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + (i * step));
$(document).ready(function(){
    $("#Categories").attr("title","Categories:\nSeperate through new lines")
    $("#Advanced Search").change(function(){
        if ($("#Advanced Search").prop("checked")) {
            $("#Data_to_be_Sent").attr("value",JSON.stringify({
                Advanced_Search: true,
                Possible_Names: (function() {
                    return $("#Name").val().split("\n")
                }),
                Categories: (function(){
                    return $("#Categories").val().split("\n");
                }),
                Sort_By: (function () {var Category_Arr=[];for (let i in range(0,$(".Sorters:checked").length()-1)) {Category_Arr.push($(".Sorters:checked").eq(i).attr("id"))};return Category_Arr})
            }));
        } else {
            $("#Data_to_be_Sent").attr("value",JSON.stringify({
                Advanced_Search: false,
                Possible_Names: (function() {
                    return $("#Name").val().split("\n")
                })
            }))
        }
        $(".Advanced_Form_Elements").prop("disabled",$("#Advanced Search").prop("checked"))
    })
    $("textarea").change(function() {
        if ($("#Advanced Search").prop("checked")) {
            $("#Data_to_be_Sent").attr("value",JSON.stringify({
                Advanced_Search: true,
                Possible_Names: (function() {
                    return $("#Name").val().split("\n")
                }),
                Categories: (function(){
                    return $("#Categories").val().split("\n");
                }),
                Sort_By: (function () {var Category_Arr=[];for (let i in range(0,$(".Sorters:checked").length()-1)) {Category_Arr.push($(".Sorters:checked").eq(i).attr("id"))};return Category_Arr})
            }));
        } else {
            $("#Data_to_be_Sent").attr("value",JSON.stringify({
                Advanced_Search: false,
                Possible_Names: (function() {
                    return $("#Name").val().split("\n")
                })
            }))
        }
    })
    $("input").change(function() {
        if ($("#Advanced Search").prop("checked")) {
            $("#Data_to_be_Sent").attr("value",JSON.stringify({
                Advanced_Search: true,
                Possible_Names: (function() {
                    return $("#Name").val().split("\n")
                }),
                Categories: (function(){
                    return $("#Categories").val().split("\n");
                }),
                Sort_By: (function () {var Category_Arr=[];for (let i in range(0,$(".Sorters:checked").length()-1)) {Category_Arr.push($(".Sorters:checked").eq(i).attr("id"))};return Category_Arr})
            }));
        } else {
            $("#Data_to_be_Sent").attr("value",JSON.stringify({
                Advanced_Search: false,
                Possible_Names: (function() {
                    return $("#Name").val().split("\n")
                })
            }))
        }
    })
})

#Search_Form {
    background-color: gray;
}

<html>

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="Search_Form_Script.js"></script>
  <link rel="stylesheet" href="/Helpful_Files/Helpful_Modules/Center.css">
  <link rel="stylesheet" href="Search_Form_Styler.css">
</head>

<body class="center">
  <form id="Search_Form" method="get" action="/Webpages/Search/Search_Results.php">
    <input type="hidden" name="q" id="Data_to_be_Sent" value=""><br>
    <label for="Name">Names: </label>
    <textarea id="Name"></textarea><br>
    <label for="Advanced Search">Advanced Search: </label>
    <input type="checkbox" id="Advanced Search"><br>
    <label for="Categories">Categories: </label>
    <textarea class="Advanced_Form_Elements" id="Categories" disabled title="Catergories:Seperate Values through new lines"></textarea><br>
    <label for="Most Recent">Most Recent: </label>
    <input type="checkbox" id="Most Recent" class="Advanced_Form_Elements" class="Sorters" disabled></input><br>
    <input type="submit">
  </form>

  <body>

</html>

because the whitespace in your ids is a bad idea `"#Advanced Search"` looks for an id of Advanced and an element `` — epascarello, Jan 07 '22 at 18:06
The CSS selector `#Advanced Search` looks for a `...` element inside an element with `id="Advanced"`. In general, as @epascarello says, it's best not to use spaces in `id` values. Usually, people use `_` or `-` or `camelCase` to distinguish words. — T.J. Crowder, Jan 07 '22 at 18:09
id cant support a whitespace, also happen to me when I deleted something and *prettifier* added space to all IDs... and all my site don't work more. so change for example the `id="Most Recent"` to `id=MostRecent` (CamelCase) or `id="most-recent"`..... (and you have to change the name for all) there is a shortcut for this `F2_KEY` in most IDEs like vscode in my case to change all the the var with the wanted result 1 time for all — Laaouatni Anas, Jan 07 '22 at 18:14

score 1 · Answer 1 · answered Jan 07 '22 at 18:08

Do not use whitespace in your ids. Use camel case id="advancedSearch"

When you do $("#Advanced Search") it is looking for

<div id="Advanced"><Search />

You can escape the whitespace and make it work, but it is a bad practice to have that whitespace in the tag

Why do my event listeners not work in html and javascript

1 Answers1