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.

eduslompohá 2 anos

Muito obrigado, arrumei meu if.

khthá 2 anos
Outra sugestão. Em vez de tratar isso com JavaScript, por que não usar o [elemento `details`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)? Ele serve justamente para o que vc está fazendo: ter um texto "detalhes", que ao ser clicado, mostra o texto adicional. Ficaria assim: ```javascript 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 = '
    '; json.results.forEach(function(value) { container.innerHTML += `
  1. ${value.title}
    detalhes ${value.overview}
    2. `; }); container.innerHTML += '
'; }); ``` 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: ```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"): [![gif mostrando como ficou][1]][1] [1]: https://i.imgur.com/2d44Bae.gif 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: ```javascript 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 = '
    '; for (const value of json.results) { container.innerHTML += `
  1. ${value.title}
    detalhes ${value.overview}
    2. `; } container.innerHTML += '
'; }); ```
eduslompohá 2 anos
Nossa que massa, não conhecia a details, uma outra forma de resolver o problema. Sou iniciante na programação e estou treinando ainda, mas ajudou bastante!
khthá 2 anos
Tem muita coisa simples que dá pra resolver no próprio HTML, ou com CSS. Nem sempre precisa de JavaScript.
eduslompohá 2 anos
Entendi, é que algumas coisas estou tentando usar JavaScript para treinar também.
khthá 2 anos
Ah, só mais uma coisa: vc acabou divulgando sua `api_key` (está na própria URL: `?api_key=etc`). Então agora todo mundo vai poder usá-la. Eu não vi como é a política de uso desta API, mas veja lá. Se for paga, por exemplo, outras pessoas usarão e a conta vai pra vc. Se não for paga, ainda sim pode ter limites de uso (X requests por mês, por exemplo), e se tiver mais gente usando, pode acabar com seu limite sem vc saber. Enfim, sugiro invalidar esta *key* e gerar outra.
eduslompohá 2 anos
Ah sim, obrigado, vou fazer isso!