1
resposta

Erro de exibição com uso de loop FOR

Estou no 7DaysOfCode, dia 3. O objetivo aqui é criar botões que a partir de seu clique, conseguimos exibir determinado resultado.

Neste caso, se o usuário clicar no Botão: 'Front-End' > Surgem 'Vue' e 'React' 'Back-End' > Surgem 'C#' e 'Java'

No entanto, o erro acontece justamente após o clique. Em que a classe que está ocultando o item (class='oculto') deve ser removida e assim exibir o resultado correto. Segundo o console, este é o erro:

Uncaught TypeError: Cannot read properties of undefined (reading 'classList') at botoesClasse1..onclick (desafio3.js:10:25)

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../Dia 1/desafio1.css">
  <link rel="stylesheet" href="desafio3.css">
  <title>Desafio 3</title>
</head>
<body>
  <div class="infomacoes">
    <h1>Desafio 3</h1>
    <p>Este é o 7DaysOfCode, onde desafios diários deverão ser cumpridos utilizando JavaScript.</p>
  </div>

  <div id="parte-1" class="caixa">
    <h2 class="titulo-pergunta">Qual dessas áreas você deseja seguir?</h2>
    <button class="botao-escolha botao-classe-1">Front-End</button>
    <button class="botao-escolha botao-classe-1">Back-End</button>
  </div>

  <div id="parte-2-front" class="caixa oculto">
    <h2 class="titulo-pergunta">Desses abaixo, qual deseja aprender?</h2>
    <button class="botao-escolha botao-classe-2">React</button>
    <button class="botao-escolha botao-classe-2">Vue</button>
  </div>

  <div id="parte-2-back" class="caixa oculto">
    <h2 class="titulo-pergunta">Desses abaixo, qual deseja aprender?</h2>
    <button class="botao-escolha botao-classe-2">C#</button>
    <button class="botao-escolha botao-classe-2">Java</button>
  </div>


  <script src="desafio3.js"></script>
</body>
</html>

JS

const elementosOcultos = document.querySelectorAll(".oculto");

const botoesClasse1 = document.querySelectorAll('.botao-classe-1');

const botoesClasse2 = document.querySelectorAll('.botao-classe-2');

for (i = 0; i < elementosOcultos.length; i++) {

  botoesClasse1[i].onclick = function () {
    elementosOcultos[i].classList.remove("oculto");
  }
}

Tentei resolver mas sem sucesso. Desde já, agradeço seu tempo em ler minha dúvida :)

1 resposta

Olá Joab, tudo bem?

Peço desculpas pela demora em obter um retorno

Ao acessar o seu github, no desafio 3, tive a oportunidade de testar o seu código e observar que o mesmo está funcional, com exceção de um erro no console que é o "caught TypeError: Cannot set properties of undefined (setting 'onclick')" geralmente ocorre quando você tenta atribuir um evento a um elemento HTML que não existe no DOM ou que não está sendo encontrado corretamente.

Uma possível solução para o erro é adicionar uma verificação para garantir que o elemento exista antes de definir a propriedade "onclick". Por exemplo, pode-se adicionar a seguinte verificação antes de definir a propriedade "onclick":

if (botoesClasse2[i]) {
  botoesClasse2[i].onclick = function () {
    elementoParte3.classList.remove('oculto');
  }
}

if (botoesClasse3[i]) {
  botoesClasse3[i].onclick = function () {
    elementoParte4.classList.remove('oculto');
  }
}

Seu código JS completo fica assim:

let escolha = " ";

const elementosOcultos = document.querySelectorAll(".parte-2");

const botoesClasse1 = document.querySelectorAll('.botao-classe-1');

const botoesClasse2 = document.querySelectorAll('.botao-classe-2');

const botoesClasse3 = document. querySelectorAll('.botao-classe-3')

const elementoParte3 = document.querySelector("#parte-3");
const elementoParte4 = document.querySelector('#parte-4');

let botaoConfirmaParte4 = document.querySelector('.botao-parte-4');
let elementoConclusao = document.querySelector("#conclusao");
let elementoRespostaParte4 = document.getElementById('resposta-parte-4');


//Click Front
botoesClasse1[0].onclick = function () {
  elementosOcultos[0].classList.remove('oculto');
  escolha += "Front-End";
}

//Click Back
botoesClasse1[1].onclick = function () {
  elementosOcultos[1].classList.remove('oculto');
  escolha += 'Back-End';
}

//clicks genéricos para partes 3 e 4
for(i = 0; i < botoesClasse2.length; i++) {

  if (botoesClasse2[i]) {
    botoesClasse2[i].onclick = function () {
      elementoParte3.classList.remove('oculto');
    }
  }

  if (botoesClasse3[i]) {
    botoesClasse3[i].onclick = function () {
      elementoParte4.classList.remove('oculto');
    }
  }

  botoesClasse3[2].onclick = apresentaConclusao;
}

//apresentação de resultado final

function apresentaConclusao() {
  elementoConclusao.innerHTML = "Portanto, você tem interesse na área de tecnologia! Começando por"+ escolha +". Como também quer se especializar em " + elementoRespostaParte4.value + ".";
}

Espero ter ajudado, qualquer dúvida, me coloco à disposição! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software