Executando verificação de segurança...
3

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

gif mostrando como ficou

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>';
  });
Carregando publicação patrocinada...
1

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!

2

Tem muita coisa simples que dá pra resolver no próprio HTML, ou com CSS.

Nem sempre precisa de JavaScript.

1
2

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.

1