Cannot read Property 'addeventlistener' of null Console error

Question

Someone could help me, is returning error on the console and I do not know why. The ids are equal.

function iniciaModal(modalID) {
  const modal = document.getElementById(modalID);
  if (modal) {
    modal.classList.add('mostrar');
    modal.addEventListener('click', (e) => {
      if (e.target.id == modalID || e.target.id == 'close') {
        modal.classList.remove('mostrar');

      }
    })
  }
}
var btnLigamos = document.getElementById('ligamosPraVoce');
btnLigamos.addEventListener('click', function () {
  iniciaModal('modalLigamos')
}); 

<div id="modalLigamos" class="modal-container">
  <div class="modalLigamos bg-light">
    <div class="container p-3">
      <div class="row">
        <div class="col-md-12">
          <h4>Nós ligamos para você</h4>
          <hr>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="form-group">
            <label for="nome">Nome</label>
            <input type="text" class="form-control" id="nome">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="form-group">
            <label for="email">Endereço de email</label>
            <input type="email" class="form-control" id="email">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md">
          <div class="form-group">
            <label for="cidades">Cidades</label>
            <select class="form-control" id="cidades">
              <option>SALINAS</option>
    
            </select>
          </div>
        </div>
        <div class="col-md">
          <div class="form-group pr-md-1">
            <label for="bairro">Bairro</label>
            <input type="text" class="form-control" id="bairro">
          </div>
        </div>
        <div class="col-md">
          <div class="form-group pr-md-1 pl-md-1">
            <label for="rua">Rua</label>
            <input type="text" class="form-control" id="rua" aria-describedby="rua">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md">
          <div class="form-group">
            <label for="tel1">Telefone 1</label>
            <input type="number" class="form-control" id="tel1">
          </div>
        </div>
        <div class="col-md">
          <div class="form-group">
            <label for="tel2">Telefone 2</label>
            <input type="email" class="form-control" id="tel2">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="form-group">
            <label for="horario_ligacao">Melhor Horário para Ligação</label>
            <select class="form-control" id="horario_ligacao">
              <option>ENTRE 10h E 12h</option>
              <option>ENTRE 12h E 14h</option>
              <option>ENTRE 14h E 16h</option>
              <option>ENTRE 16h E 18h</option>
            </select>
          </div>
        </div>
      </div>
      <div class="row my-1">
        <div class="col-md d-flex justify-content-end">
        <button id="close"class="btn btn-secondary mr-2">Fechar</button>
          <button class="btn btn-primary" type="submit">Solicitar Ligação</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Probably the error is happening on this line btnLigamos.addEventListener('click', function () ... correct?

Do the test as you did in the previous part of the code, if the result of the getElementById is not null:

var btnLigamos = document.getElementById('ligamosPraVoce');
if (btnLigamos) {
   btnLigamos.addEventListener('click', function () {
     iniciaModal('modalLigamos')
   });
}

And principalmentre, add the id Link on your button, what is searching on getElementByID.

Change the html of the button to:

<button id="ligamosPraVoce" class="btn btn-primary" type="submit">Solicitar Ligação</button>

Why then your variable btnLigamos was null? Why when searching for a non-existent "ligamosPraVoce" id in the DOM elements, none was found and the return is correctly null.

Answer 2

From what I understand, your code has some problems, First...

-> You do not have an element with ID 'ligamosPraVoce' inside your HTML.

Second... You inserted a .addEventListener() within a conditional, which doesn’t make much sense, so it wouldn’t execute even if the script could find that lost element.

Third... You inserted a callback into the method .addEventListener() ambiguously, that is, you could rewrite it as .addEventListener('click', inicialModal('modalLigamos'))

Well, your code has some organization problems, but if you add this 'link to Windows' element inside the HTML and removing this condition, you may be able to run normally.