#DÚVIDA - addEventListener não funciona ao clicar na div
Pessoal estou tentando mas não vai, não consegui achar o erro, ao clicar na div, mostra o conteúdo, porém ao clicar novamente, ele não fecha os detalhes.
Meu código é esse aqui:
fetch('https://api.themoviedb.org/3/movie/popular?api_key=307f3bce2cf2642bb1caa0463410a0de&language=en-US&page=1', {
method: 'GET'
})
.then(response => response.json())
.then(function (json) {
let container = document.querySelector('.container');
let i = 1;
// console.log(json);
json.results.map(function (value, i) {
container.innerHTML += `
<div class="item"><ol start="${i + 1}"><li><p class="title"><div class="details" style="cursor:pointer;">` + value.title + `<p class="more">+ detalhes</p></div><hr>
<div class="description" style="display:none;" >`+ value.overview + `</div>
</hr>
</p></li></ol></div>`;
});
let titles = document.querySelectorAll('.item');
for (let j = 0; j < titles.length; j++) {
titles[j].addEventListener('click', function (e) {
if (e.target.querySelector('.description').style.display = "none") {
e.target.querySelector('.description').style.display = "block";
} else {
e.target.querySelector('.description').style.display = "none";
}
});
}
});
Detalhe: Não sei o porque mas ele está abrindo a "descrição dos filmes" só quando clica no cantinho esquerdo perto do número.
Obrigado pela ajuda desde já!
No if vc tem que usar == em vez de =. Isso porque o = é uma atribuição, e não uma comparação.
Por exemplo, veja este código:
var x = 'abc';
if (x = 'def') {
x = 'ghi';
}
console.log(x); // ghi
Nesse código, ao chegar no if, a variável x recebe o valor 'def', e este é avaliado no if. E o JavaScript considera que qualquer string não-vazia é equivalente a true.
Ou seja, sempre vai entrar nesse if. Mas se mudar para if (x == 'def'), aí funciona da forma esperada (só entra no if se x for igual a 'def').
No seu código é a mesma coisa, não importa o valor do display, ele sempre entra no if e muda o display pra block.
- ';
json.results.forEach(function(value) {
container.innerHTML += `
- ${value.title}
detalhes
${value.overview} `;
});
container.innerHTML += '
- ';
for (const value of json.results) {
container.innerHTML += `
- ${value.title}
detalhes
${value.overview} `;
}
container.innerHTML += '
Mano basicamente é porque o teu "description" ele é filho de uma ol > li, então fazendo uns testes aqui eu percebi que quando clica no numero da lista, ele faz a função, mas quando clica no texto não, é porque na logica do teuu js ta assim
e.target.querySelector('.description').style.display = "none"
então tipo toda vez que clicar em um elemento em que ele tenha o FILHO com a classe ".description" é que ele vai aplicar o if else(inclusive corrige teu if else porque ele como atribuição o correto seria comparação como esse abaixo:).
e.target.querySelector('.description').style.display == "none"
resumindo, como o teu .description não é filho de nenhuma tag 'p', 'hr' então quando clica no titulo ou no "+detalhes" ele executa o if else mas não aplica em nada entende?
Fiz um codigo que rodou usando ParentNode. O Atributo "parentNode" faz referencia a um elemento pai no DOM, no caso eu usei ele duas vezes porque ha casos em que o "Target" esta muito abaixo na camada do DOM. Acredito que essa não seja a melhor forma de resolver tal problema mas no momento resolve sua situação, faça os testes e diga se rodou por ai
Segue abaixo o código que funcionou para o seu caso:
fetch('https://api.themoviedb.org/3/movie/popular?api_key=307f3bce2cf2642bb1caa0463410a0de&language=en-US&page=1', {
method: 'GET'
})
.then(response => response.json())
.then(function (json) {
let container = document.querySelector('.container');
let i = 1;
json.results.map(function (value, i) {
container.innerHTML += `
<div class="item"><ol start="${i + 1}"><li> <p class="title"> <div class="details" style="cursor:pointer;">` + value.title + `<p class="more">+ detalhes</p>
</div> <hr> <div class="description" style="display:none;" >` + value.overview + `</div> </hr> </p> </li> </ol></div>`;
});
let titles = document.querySelectorAll('.item');
for (let j = 0; j < titles.length; j++) {
titles[j].addEventListener('click', function (e) {
if (e.target.parentNode.parentNode.querySelector('.description').style.display == "none") {
e.target.parentNode.parentNode.querySelector('.description').style.display = "block";
} else {
e.target.parentNode.parentNode.querySelector('.description').style.display = "none";
}
});
}
});