Outra sugestão. Em vez de tratar isso com JavaScript, por que não usar o elemento details
? Ele serve justamente para o que vc está fazendo: ter um texto "detalhes", que ao ser clicado, mostra o texto adicional. Ficaria assim:
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');
container.innerHTML = '<ol start="1">';
json.results.forEach(function(value) {
container.innerHTML += `<li>${value.title}
<details>
<summary>detalhes</summary>
${value.overview}
</details>
</li>`;
});
container.innerHTML += '</ol>';
});
Ou seja, agora eu tenho uma lista (ol
), e cada elemento dela (cada li
) contém uma tag details
. O texto do summary
é o "detalhes", e ao ser clicado, ele revela o restante do conteúdo.
E em vez de colocar estilos inline, vc pode usar este CSS:
li {
list-style-type: decimal;
}
summary {
cursor: pointer;
list-style-type: "+ ";
}
Que fica do jeito que vc queria (filmes com numeração começando do 1, e o "+" antes de "detalhes"):
O resto da formatação vc tem que ajustar também, claro, mas aí é com vc :-)
Também troquei map
por forEach
. Sei que com map
"funciona", mas a ideia de map
é fazer algo com os elementos e retornar outro array com os resultados. Mas no seu caso vc estava ignorando o resultado do map
(o array que ele retorna), então forEach
faz mais sentido (só quero iterar pelos elementos e fazer algo com eles, mas não quero gerar outro array com os resultados).
Ou, em vez disso, pode usar um for
mesmo:
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');
container.innerHTML = '<ol start="1">';
for (const value of json.results) {
container.innerHTML += `<li>${value.title}
<details>
<summary>detalhes</summary>
${value.overview}
</details>
</li>`;
}
container.innerHTML += '</ol>';
});