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 :)