0

Meu objetivo é: quando clicar na div "job-card", o "job-resume" respectivo deveria aparecer, porém me retorna o erro "Uncaught TypeError: Cannot read property 'classList' of undefined at HTMLDivElement.".

Não sei onde está o erro, podem dar uma olhada? Obrigado.

let jobCard = document.querySelectorAll('.job-card');
let jobResume = document.querySelectorAll('job-resume');
for(i = 0; i < jobCard.length;i++) {
    jobCard[i].addEventListener('click', function(){
        this.classList.add('job-card-active');
        jobResume[i].classList.add('d-block');
    });
}
2
  • o seu job-card é o que ao certo ? tagname ? id? do que eu vi no seu codigo document.querySelectorAll('.job-card'); tem o .job-card antes ou seja estas a procura de uma class?
    – ScrapBench
    Commented 16/10/2019 às 20:23
  • 1
    Nessa linha let jobResume = document.querySelectorAll('job-resume'); não está faltando um ponto no seletor ('.job-resume')? Commented 16/10/2019 às 20:39

1 Resposta 1

2

Além do erro citado pelo @Augusto (falta do . no querySelctorAll) nos comentários, você terá um problema com a variável i dentro do seu for.

Quando você clicar sob um div.job-card o valor do i (dentro do for) será igual ao número de divs que tenham a classe job-card. Este é um problema clássico de closure mas não vou entrar neste tema porque para o seu caso há uma alternativa mais simples, por exemplo, salvando o i em um data- attribute.

Montei um exemplo seguindo as informações que você deixou, espero que ajude:

let jobCard = document.querySelectorAll('.job-card');
let jobResume = document.querySelectorAll('.job-resume');

/*
for(i = 0; i < jobCard.length; i++) {
    jobCard[i].addEventListener('click', function() {
        this.classList.add('job-card-active');
        console.log(i); // Execute este trecho e veja o valor do "i" quando clicar em um div
        jobResume[i].classList.add('d-block');
    });
}
*/

for(i = 0; i < jobCard.length; i++) {
  jobCard[i].setAttribute('data-i', i);
  
  jobCard[i].addEventListener('click', function() {
    const idx = this.getAttribute('data-i');
    
    // Alterei o add pelo toggle
    this.classList.toggle('job-card-active');
    jobResume[idx].classList.toggle('d-block');
  });
}
.job-card-active {
    border: 1px solid #ff0000;
}

.d-block {
    display: block !important;
}

.job-resume {
    display: none;
}
<div class="job-card">Item 1</div>
<div class="job-resume">Reumo 1</div>
<div class="job-card">Item 2</div>
<div class="job-resume">Reumo 2</div>
<div class="job-card">Item 3</div>
<div class="job-resume">Reumo 3</div>

1
  • Funcionou! Muito obrigado. Commented 18/10/2019 às 13:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .