document.querySelector is null

Question

I have an error to resolve at document.querySelector('#myAjax') : TypeError: document.querySelector(...) is null

Below my code. what's the problem? thank you

<div id="#myAjax"></div>

<script>
  window.addEventListener("DOMContentLoaded", (event) => {
    console.log("DOM uploaded and analysed");
    document.querySelector('#myAjax')
      .addEventListener('click', function(e) {
        let selectedOptionVal = document.querySelector('#move_to_category_id').value,
          options_html = "";
        fetch("{$categories_ajax}?" + selectedOptionVal)
          .then(function(response) {
            return response.json();
          })
          .then(function(jsonResponse) {
            // Ajax success
            console.log("data is :", jsonResponse);
            for (const index in jsonResponse) {
              let category_id = jsonResponse[index].id;
              let category_name = jsonResponse[index].text;
              let selectedString = category_id == selectedOptionVal ? ' selected="selected"' : '';
              options_html += '<option value="' + category_id + '"' + selectedString + '>' + category_name + '</option>';
            }
            $('#move_to_category_id').html(options_html);
          })
          .catch(function(err) {
            // error ajax 
            alert("error :" + err);
          });
      });
  });
</script>

Answer 1

The CSS id selector uses the ID attribute of an HTML element to select one unique element on a page. To use an ID selector in CSS, you write a hashtag # followed by the ID of the element but there is no need and actually very confusing and wrong to add the # in the value of the attribute.

Bottom line, you need to remove the # from the id attribute. change it from:

<div id="#myAjax"> // wrong

To

 <div id="myAjax"> // correct

Answer 2

Remove # from the component div id: <div id="myAjax"></div>

Answer 3

<div id="#myAjax">

in this line you should not use '#'
use

<div id="myAjax">