Javascript não funciona

[John Hebert Trindade]

Boa tarde,

Tenho o códigos abaixo que esta a funcionar.

Ele é da seguinte forma, se selecionar Portugal, aparece três campos select para selecionar o distrito, concelho e freguesia, caso escolha outra País esses campos ficam ocultos.

<!-- Campo select Pais -->
<div class="column">
   <label for="adms_pais_id" class="title-input">País:<span class="text-danger">*</span> </label>
      <select class="input-adm" name="adms_pais_id" id="adms_pais_id">
           <option value="">Selecione</option>
              <?php
              foreach ($this->data['pais']['pais'] as $pais) { extract($pais);
                  if ((isset($valorForm['adms_pais_id'])) and ($valorForm['adms_pais_id'] == $id)) {
                    echo "<option value='$id' selected>$name_pais</option>";
                  } else {
                    echo "<option value='$id'>$name_pais</option>";
                  }
                }
             ?>
      </select>
</div>

<!-- Campos Selects de Distrito, Concelho e Freguesia -->
<label for="localidade" class="title-input">Autarquivas ou Localidade do Nascimento:</label>
            <div class="row-input" id="divLocalidade">
              <div class="column">
              <?php
                  $localidade_nascimento = '';
if (isset($valorForm['localidade_nascimento'])) {
  $localidade_nascimento = $valorForm['localidade_nascimento'];
}
?>
                  <label for="localidade_nascimento" class="title-input">Localidade do Nascimento:<span class="text-danger">*</span></label>
                  <input type="text" name="localidade_nascimento" id="localidade_nascimento" class="input-adm" placeholder="Digite a localidade do nascimento" autocomplete="off" value="<?php echo $localidade_nascimento; ?>">
              </div>
            </div>
              <div class="row-input" id="divAutarquias">
              <div class="column">
                <label for="adms_dist_nasc_id" class="title-input">Distrito:</label>
                <select class="input-adm" name="adms_dist_nasc_id" id="adms_distrito_id2" onchange="selectConcelho(2)">
                  <option value="">Selecione</option>
                  <?php
    foreach ($this->data['distritonasc']['distnasc'] as $distnasc) {
      extract($distnasc);
      if ((isset($valorForm['adms_dist_nasc_id'])) and ($valorForm['adms_dist_nasc_id'] == $id_distnasc)) {
        echo "<option value='$id_distnasc' selected>$name_distrito</option>";
      } else {
        echo "<option value='$id_distnasc'>$name_distrito</option>";
      }
    }
?>
                </select>
              </div>
              <div class="column">
                <label for="adms_conc_nasc_id" class="title-input">Concelho:</label>
                <select class="input-adm" name="adms_conc_nasc_id" id="adms_concelho_id2" onchange="selectFreguesia(2)">
                  <option value="">Selecione</option>
                  <?php
foreach ($this->data['concelhonasc']['concnasc'] as $concnasc) {
  extract($concnasc);
  if ((isset($valorForm['adms_conc_nasc_id'])) and ($valorForm['adms_conc_nasc_id'] == $id_concnasc)) {
    echo "<option value='$id_concnasc' selected>$name_concelho</option>";
  } else {
    echo "<option value='$id_concnasc'>$name_concelho</option>";
  }
}
?>
                </select>
              </div>
              <div class="column">
                <label for="adms_freg_nasc_id" class="title-input">Freguesia:</label>
                <select class="input-adm" name="adms_freg_nasc_id" id="adms_freguesia_id2">
                  <option value="">Selecione</option>
                  <?php
foreach ($this->data['freguesianasc']['fregnasc'] as $fregnasc) {
  extract($fregnasc);
  if ((isset($valorForm['adms_freg_nasc_id'])) and ($valorForm['adms_freg_nasc_id'] == $id_fregnasc)) {
    echo "<option value='$id_fregnasc' selected>$name_freguesia</option>";
  } else {
    echo "<option value='$id_fregnasc'>$name_freguesia</option>";
  }
}
?>
                </select>
              </div>
            </div>

//Ativa/oculta campos do Formulário de Processo de Funerais
// Receber o pais da nacionlidade do falecido para exibir ou ocultar a autrarquias
const adms_pais_nasc_falecido = document.getElementById('adms_pais_id')
const divLocalidade = document.getElementById('divLocalidade')
const divAutarquias = document.getElementById('divAutarquias')

adms_pais_nasc_falecido.addEventListener('change', function (event) {
  if (event.target.value == '1') {
    divLocalidade.style.display = 'grid'
    divAutarquias.style.display = 'grid'
  } else {
    divLocalidade.style.display = 'grid'
    divAutarquias.style.display = 'none'
  }
})

O meu problema é o seguinte:

Fiz o mesmo para outros campos mas não funciona e não consigo achar o erro, se alguém conseguir ajudar fico muito grato.

<div class="row-input">
    <div class="column">
         <label for="adms_estado_civil_id" class="title-input">Estado Civil:</label>
          <select class="input-adm" name="adms_estado_civil_id" id="adms_estado_civil_id">
               <option value="">Selecione</option>
                  <?php
                  foreach ($this->data['estadocivil']['estado'] as $estado) {extract($estado);
                  if ((isset($valorForm['adms_estado_civil_id'])) and ($valorForm['adms_estado_civil_id'] == $id)) {
                     echo "<option value='$id' selected>$name_estado</option>";
                  } else {
                     echo "<option value='$id'>$name_estado</option>";
                   }
                  }
                  ?>
           </select>
     </div>
     <div class="column" id="genero_conjuge">
         <label for="adms_gen_conjuge_id" class="title-input">Gênero:<span class="text-danger">*</span> </label>
              <select class="input-adm" name="adms_gen_conjuge_id" id="adms_gen_conjuge_id">
                   <option value="">Selecione</option>
                   <?php
                      foreach ($this->data['genero']['gen'] as $genero) {
                        extract($genero);
                        if ((isset($valorForm['adms_gen_conjuge_id'])) and ($valorForm['adms_gen_conjuge_id'] == $id)) {
                          echo "<option value='$id' selected>$name_genero</option>";
                        } else {
                          echo "<option value='$id'>$name_genero</option>";
                        }
                      }?>
               </select>
     </div>
</div>

//Recebe o estado civil do conjuge
const adms_est_civil = document.getElementById('adms_estado_civil_id')
const divEstCivil = document.getElementById('genero_conjuge')

adms_est_civil.addEventListener('change', function (e) {
  if (e.target.value == '2') {
    divEstCivil.style.visibility = 'hidden'
  } else {
    divEstCivil.style.visibility = 'visible'
  }
})

lembrando que já coloquei "divEstCivil.style.visibility = 'hidden'" e "divEstCivil.style.display = 'none'"

[user]

O teu codigo javascript está a ser corrido antes ou depois de renderizar o HTML?

Neste caso onde declaras event listners, tens de te certificar que o javascript corre depois de ter os elementos HTML renderizados no browser.

Onde estás a chamar o codigo javascript?

[John Hebert Trindade]

Está no final do html

[user]

Hmmm, podes experimentar fazer desta maneira.
 

<script>
	document.addEventListener('DOMContentLoaded', function() {
      
      	// Colocar aqui o codigo Javascript
      const adms_est_civil = document.getElementById('adms_estado_civil_id')
      const divEstCivil = document.getElementById('genero_conjuge')

      adms_est_civil.addEventListener('change', function (e) {
        if (e.target.value == '2') {
          divEstCivil.style.visibility = 'hidden'
        } else {
          divEstCivil.style.visibility = 'visible'
        }
      })
	});
</script>

Desta maneira, garante-se que o javascript só corre quando a pagina (e todos os seus elementos) estiverem carregados.

Podes ainda tentar usar o evento 'onchange' ao invés de 'change':
 

adms_est_civil.addEventListener('onchange', function (e) {
        if (e.target.value == '2') {
          divEstCivil.style.visibility = 'hidden'
        } else {
          divEstCivil.style.visibility = 'visible'
        }
});

Não tenho a certeza se o evento é 'change' ou 'onchange', exprimenta e ve se tens o resultado que pretendes

[user]

Mais ainda, podes experimentar fazer debug a partir do DevTools do browser (f12), vais a aba "Sources" e colocas um breakpoint na linha onde queres fazer debug, acompanhando o valor das variáveis pode ser mais fácil de identificar o problema

https://www.youtube.com/watch?v=ZaOZFkHTloM