getElementById() returning null in one function but not in another

Question

EDIT: Have no idea what exactly was happening. Deleted the function, copied the one was working and edit. Now it's working

HTML

   <section id="sectionConCor">
    
      <h2> Controle de Correspondências </h2>
    
      <div class="areaFuncional" id="areaConCor">
    
        <form id="formConCor">
    
          <i class="fa-solid fa-circle-plus fa-beat fa-lg botaoFormEspecial" id="botaoAddTipoConCor" onclick="adicionaTipoCorrespondencia()"></i>
          <i class="fa-solid fa-circle-plus fa-beat fa-lg botaoFormEspecial" id="botaoAddAcondicionamentoConCor" onclick="adicionaAcondicionamento()"></i>
          <i class="fa-solid fa-circle-plus fa-beat fa-lg botaoFormEspecial" id="botaoAddRemetenteConCor" onclick="adicionaEmpresa()"></i>
          <i class="fa-solid fa-circle-plus fa-beat fa-lg botaoFormEspecial" id="botaoAddDestinatarioConCor" onclick="adicionaEmpresa()"></i>
    
          <select class="elementoFormulario" id="ConCorTipo" name="ConCorTipo">
            <?!= queryOptionsNamedRange(planilhaPortariaDB , "tiposCorrespondencia") ?>
          </select>
          <label class="elementoFormulario" for="ConCorTipo">Tipo</label><br>
    
          <input class="elementoFormulario" type="text" id="conCorQuantidade" name="conCorQuantidade" pattern="\d+">
          <label class="elementoFormulario" for="conCorQuantidade">Quantidade</label><br>
    
          <select class="elementoFormulario" id="ConCorAcondicionamento" name="ConCorAcondicionamento">
            <?!= queryOptionsNamedRange(planilhaPortariaDB , "tiposAcondicionamento") ?>
          </select>
          <label class="elementoFormulario" for="ConCorAcondicionamento" >Acondicionamento</label><br>
    
          <select class="elementoFormulario" id="conCorRemetente" name="conCorRemetente">
            <?!= queryOptionsNamedRange(planilhaPortariaDB , "empresas") ?>
          </select>
          <label class="elementoFormulario" for="conCorRemetente">Remetente</label><br>
    
          <select class="elementoFormulario" id="conCorDestinarario" name="conCorDestinarario">
            <?!= queryOptionsNamedRange(planilhaPortariaDB , "empresas") ?>
          </select>
          <label class="elementoFormulario" for="conCorDestinarario">Destinatário</label><br>
    
          <select class="elementoFormulario" id="conCorResponsavel" name="conCorResponsavel" required>
            <?!= queryOptionsNamedRange(planilhaPortariaDB , "colaboradoresCompleto") ?>
          </select>
          <label class="elementoFormulario" for="conCorResponsavel" >Responsável</label><br>
    
          <input class="elementoFormulario" type="text" id="conCorNotaFiscal" name="conCorNotaFiscal">
          <label class="elementoFormulario" for="conCorNotaFiscal">Nota Fiscal</label><br>
    
          <button class="button botaoForm elementoFormulario" id="registrarCorrespondencia" name="registrarCorrespondencia" type="button" onclick="registrarConCor()">Registrar</button>
          
          <!-- <input type="button" onclick="teste()" value="teste!"> -->
    
        </form>
    
      </div>

</section>

JS

<script>

  function registrarConCor() {

    
    const arrayForm = [];
    arrayForm.push(document.getElementById("ConCorTipo").value);
    arrayForm.push(document.getElementById("conCorQuantidade").value); 
    arrayForm.push(document.getElementById("ConCorAcondicionamento").value); 
    arrayForm.push(document.getElementById("conCorRemetente").value); 
    arrayForm.push(document.getElementById("conCorDestinarario").value); 
    arrayForm.push(document.getElementById("conCorResponsavel").value); 
    arrayForm.push(document.getElementById("conCorNotaFiscal").value);

    //window.alert(arrayForm.value);

    google.script.run.gravarNaPlanilhaDB("conCor", arrayForm.toString()); //grava os dados na planilha

  }

  function atualizaAcondicionamentos(arrayAcondicionamentos) {

    //alert("cargos")

    alert("arrayAcondicionamentos= " + arrayAcondicionamentos);

    let selectAcondicionamentoConCor = document.getElementById("conCorAcondicionamento");
    let acondicionamentos = arrayAcondicionamentos;

    alert("acondicionamentos= " + acondicionamentos);

    acondicionamentos = JSON.parse(acondicionamentos);
    alert("acondicionamentos= " + acondicionamentos);

    alert(document.getElementById("conCorAcondicionamento"));


    selectAcondicionamentoConCor.innerHTML = "";


    //alert(acondicionamentos)

    for (let i = 0; i < Object.values(acondicionamentos).length; i++) {

      alert(i);
      alert(acondicionamentos[i]);
      alert("antes temos: " + selectAcondicionamentoConCor.innerHTML);
      let newOption = "<option value='" + acondicionamentos[i] + "'>" +  acondicionamentos[i] + "</option>\n";
      alert("e aqui está a option " + newOption)
      alert(typeof newOption)
      selectAcondicionamentoConCor.innerHTML = selectCargo.innerHTML + newOption
      selectAcondicionamentoConCor.insertAdjacentHTML("beforeend", newOption);
      alert("por fim temos: " + selectCargo.innerHTML);

    }
    
    return;

  }
  

</script>

The first function, registrarConCor(), works with 0 issues. The document.getElementById("ConCorAcondicionamento") works here and don't returns null

But, in atualizaAcondicionamentos(arrayAcondicionamentos) the same document.getElementById("ConCorAcondicionamento") returns null.

The main HTML is this one:

<!DOCTYPE html>

<html lang="pt-BR">

    <head>

        <base target="_top">


        <!-- Fontes -->

        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Amatic+SC&family=Cabin:wght@400;500;600&family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap" rel="stylesheet">

        <!-- CSS -->
        <style>
          <?!= include('MAIN/geraisCSS'); ?> /*CSS gerais, incluindo root*/
          <?!= include('HEADER/headerCSS'); ?> /*CSS do cabeçalho*/
          <?!= include('FOOTER/footerCSS'); ?> /*CSS do rodapé*/
          <?!= include('NAV/navCSS'); ?> /*CSS da barra de navegação*/
          <?!= include('CADTER/cadTerCSS'); ?> /*CSS CADTER*/
          <?!= include('ACTER/acTerCSS'); ?> /*CSS acTer*/
          <?!= include('MOVCOB/movCobCSS'); ?> /*CSS MOVCOB*/
          <?!= include('CONCOR/conCorCSS'); ?> /*CSS CONCOR*/
          <?!= include('CADOB/cadObCSS'); ?> /*CSS CADOB*/
          <?!= include('INICIO/inicioCSS'); ?> /*CSS INICIO*/
          <?!= include('LOGIN/loginCSS'); ?> /*CSS LOGIN*/
          <?!= include('LOADER/carregandoCSS'); ?> /*CSS LOADER*/
        </style>

        <!-- Icones -->
        <script src="https://kit.fontawesome.com/58cb82b02a.js" crossorigin="anonymous"></script>
    
    </head>

    <body onload="procedimentosInicias()">


        <?!= includeTemplate('HEADER/headerHTML'); ?> <!-- bloco do cabeçalho, editado separadamente -->
        <?!= includeTemplate('NAV/navHTML'); ?> <!-- bloco da barra de navegação, editado separadamente -->
        <?!= includeTemplate('CADTER/cadTerHTML'); ?> <!-- bloco cadTer -->
        <?!= includeTemplate('ACTER/acTerHTML'); ?> <!-- bloco acTer -->
        <?!= includeTemplate('MOVCOB/movCobHTML'); ?> <!-- bloco movCob -->
        <?!= includeTemplate('CONCHA/conChaHTML'); ?> <!-- bloco conCha -->
        <?!= includeTemplate('CONLEGUA/conLeGuaHTML'); ?> <!-- bloco conLeGua -->
        <?!= includeTemplate('CONMAL/conMalHTML'); ?> <!-- bloco conMal -->
        <?!= includeTemplate('CONCOR/conCorHTML'); ?> <!-- bloco conCor -->
        <?!= includeTemplate('CONLAC/conLacHTML'); ?> <!-- bloco conLac -->
        <?!= includeTemplate('CADOB/cadObHTML'); ?> <!-- bloco cadOb -->
        <?!= includeTemplate('INICIO/inicioHTML'); ?> <!-- bloco inicio -->
        <?!= includeTemplate('FOOTER/footerHTML'); ?> <!-- bloco do rodapé, editado separadamente -->
        <?!= includeTemplate('LOGIN/loginHTML'); ?> <!-- bloco do Login, sobrepõe tudo exceto LOADER -->
        <?!= includeTemplate('LOADER/carregandoHTML'); ?> <!-- bloco do LOADER, sobrepõe tudo -->


        <aside>

            <p> coisas importantes e check list. Talvez em duas partes </p> <!-- gerar o bloco separado depois -->

        </aside>

        <?!= include('MAIN/mainJS'); ?>
        <?!= include('CADTER/cadTerJS'); ?>
        <?!= include('ACTER/acTerJS'); ?>
        <?!= include('MOVCOB/movCobJS'); ?>
        <?!= include('CONCHA/conChaJS'); ?>
        <?!= include('CONLEGUA/conLeGuaJS'); ?>
        <?!= include('CONMAL/conMalJS'); ?>
        <?!= include('CONCOR/conCorJS'); ?>
        <?!= include('CONLAC/conLacJS'); ?>
        <?!= include('LOGIN/loginJS'); ?>

    </body>
  
</html>

The second function is called here:

  function adicionaAcondicionamento() {

    let novoAcondicionamento = window.prompt("Insira o acondicionamento, por favor, tenha certeza de adicionar somente se não encontrar o acondicionamento na lista");
    
    while (novoAcondicionamento == "") {

      novoAcondicionamento = window.prompt("Insira o acondicionamento, por favor, tenha certeza de adicionar somente se não encontrar o acondicionamento na lista");

    }

    if (novoAcondicionamento != null && novoAcondicionamento != "") {

      google.script.run.withSuccessHandler(atualizaAcondicionamentos).registraNovoAcondicionamento(novoAcondicionamento);

    }

  }

The registraNovoAcondicionamento(novoAcondicionamento) it's a gs function:

function registraNovoAcondicionamento(tipo) {

  let uPort = retornaUPortAtivo(); //determina usuário atual
  let id = Utilities.getUuid(); //gera uma id
  let data = Utilities.formatDate(new Date(), "GMT-3", "dd/MM/yyyy hh:mm")
  let valores = [id,tipo,data,uPort]; //cria um array composto de uma ID e o nom do cargo
  destino = "Tipos de Acondicionamento"; //marca o destino como a folha Cargos

  //Logger.log("colocarei " + valores + " na planilha " + destino)

  planilhaPortariaDB.getSheetByName(destino).appendRow(valores)
  
  //gravarNaPlanilhaDB(destino, valores); //grava o cargo

  array = planilhaPortariaDB.getRangeByName("tiposAcondicionamento").getValues().filter(String) //cria um array para ser utilizado pelo JS, sem os valores em branco
  
  array = JSON.stringify(array) //torna o array uma string JSON

  return array
  

}

Basically, this is what happens:

After clicking in a button, to more more exact:

  <i class="fa-solid fa-circle-plus fa-beat fa-lg botaoFormEspecial" id="botaoAddAcondicionamentoConCor" onclick="adicionaAcondicionamento()"></i>

this one, the user receive a prompt asking a value. JS get this value and does a google.script.run

The script called add the value of the prompt in a spreadsheet and then returns an array of all rows on that spreadsheet

The returned array must be used to create a select list, each value being an option. This procedure is working in other cases.

The first function, the one that works, is called by another button:

  <button class="button botaoForm elementoFormulario" id="registrarCorrespondencia" name="registrarCorrespondencia" type="button" onclick="registrarConCor()">Registrar</button>

This one

It's takes all values in the form an insert in a spreadsheet, simple as that

enter image description here

The red circle is the button that is triggering the code with issues The blue circle is working The yellow arrow is pointing to the select that I am trying to get the innerHTML. As you can see, the element is there

Sounds like the element doesn't exist at the point that `atualizaAcondicionamentos` is called — CertainPerformance, Jun 02 '22 at 16:14
Sounds like that, but the element exists. Since this functions is called after the user press a button in the form. The button is there, the element is there. I really can't get it — David Aguiar Aquino Paiva, Jun 02 '22 at 16:18
Can't say since we can't see where `atualizaAcondicionamentos` is called, other than that the element doesn't exist at that point — CertainPerformance, Jun 02 '22 at 16:19
The most weird part is that there is another piece of code and another piece of HTML that's does exactly the same thing, but it's working as intended. — David Aguiar Aquino Paiva, Jun 02 '22 at 16:34
Try creating a simple [mcve] and you'll probably be able to figure it out yourself — Cooper, Jun 02 '22 at 18:31

getElementById() returning null in one function but not in another

0 Answers0