Empty string passed to getElementById()

Question

I’m using the jQuery and I have the following code

jQuery(document).ready(function($){

      $(".checkParcelamento").click(function(){
          var bandeira = $("#bandeiraCartao").val();
          var numero_cartao = $("input[name='numero_cartao']").val();
          var cvv = $("input[name='cvv']").val();
          var mes_cartao = $("input[name='mes_cartao']").val();
          var ano_cartao = $("input[name='ano_cartao']").val();

          if(numero_cartao == ''){

            swal('Erro!', 'Por favor, informe o número do seu cartão para continuar', 'error');

          }else if(cvv == ''){

            swal('Erro!', 'Por favor, informe o código de segurança para continuar', 'error');

          }else if(mes_cartao == ''){

            swal('Erro!', 'Por favor, informe o mês da validade para continuar', 'error');

          }else if(ano_cartao == ''){

            swal('Erro!', 'Por favor, informe o ano da validade para continuar', 'error');

          }else{


            $gn.ready(function(checkout) {

            var callback = function(error, response) {
              if(error) {
                // Trata o erro ocorrido
                console.error(error);
              } else {

                checkout.getInstallments(50000,bandeira, function(error2, response2){
                  if(error2) {
                    // Trata o erro ocorrido
                    console.log(error2);
                  } else {

                    console.log(response2);

                    $.each(response2, function(i,e){

                    $.each(e, function(a,b){

                      if(a == 'installments'){

                        var html = '<select name="parcelamento" class="form-control">';

                        $.each(b, function(c,d){

                          html += '<option value="'+d.currency+'">'+d.installment+'x de '+d.currency+'</option>';

                        });

                        html += '</select>';

                        $("#parcelamento").html(html);

                      }
                    });
                  });
                  }
                });
                // Trata a resposta
                console.log(response);
              }
            };

            checkout.getPaymentToken({
              brand: bandeira, // bandeira do cartão
              number: numero_cartao, // número do cartão
              cvv: cvv, // código de segurança
              expiration_month: mes_cartao, // mês de vencimento
              expiration_year: ano_cartao // ano de vencimento
            }, callback);

          });


          }
      });
    });

The problem occurs on the line $(".checkParcelamento"). click(Function(){. By clicking the button, instead of executing the code, it returns me the error String vazia passada para getElementById() that in the jQuery archive.

Strange is that I have other codes that do the click normally, but this one is not giving. The button code:

<div class="form-group">
<input type="button" id="checkParcelamento" class="btn btn-primary checkParcelamento" value="Continuar">
</div>

I’ve tried using with # but the same error occurs.

Answer 1

I believe that jQuery may have a role with some other features of the browser when it will interpret the query of the first parameter of $(query) -> jQuery(query) -> $.fn.find(query), etc., for example, jQuery may need to find out if the query forms HTML elements, for example:

$("<span></span>")

Mozilla Firefox may have a native method that works different from other browsers, maybe jQuery depends on this native method, then some confusion occurs and jQuery ends up passing a string to document.getElementById. Another possibility of exception may be (very and very) rarely caused by a browser extension.

Note: this error Empty string passed to getElementById() exists only in Firefox, other browsers are less "explicit" and return null or an HTML element (I’m not saying, maybe there might be a browser similar to Firefox).

An attempt to solve the problem

If jQuery knows that the query is an object, he may not need to interpret it:

$(document.getElementById("checkParcelamento"));

Answer 2

The error is being generated in some Firefox extension, not in your code.

PS: I also use the Gerencianet Checkout API and your code is correct (payment c/card).

You are free to use so much id (#) when class (.) in the jQuery selector, it works the same way, remembering that for ID you can have as many selectors as you want but only one element with that ID on the page, already by class you can have as many selectors and elements as you want, being more advantageous to use class because you can have more than one event trigger on the same page without problems.

Answer 3

Srs. in fact the problem is probably outside the code presented as already reported in that post, lack of attribute in the label

When label id is missing

<label for="">Stuff:</label>

corrected

<label for="someID">Stuff:</label>