Function doesn't filter my elements

Hello,

I’ve created a function which is supposed to show only films no older than from 2000, but it doesn’t work, it shows all the films.

Thanks for help !

import { movies } from './src/data';

const app = document.querySelector('#app');

const body = document.querySelector('body');

function render() {



  const titre = '<h1>Hackerflix</h1>';

  const recentFilms = '<button id="recent" class="btn btn-primary">Recent films only</button>';

  let posters = '<div class="box-films">';

  for (let i = 0; i < movies.length; i++) {

    if (movies[i].img === true) {

      posters += `

        <div class="films">

          <img src="posters/${movies[i].imdb}.jpg" class="img"/>

          <h5>${movies[i].title}</h5>

        </div>`;

    } else {

      posters += `

          <div class="films">

            <div class="posters">

            <h5>${movies[i].title}</h5>

            </div>

         

        </div>`;

    }

    posters += `

      <div class="card-body">

        <div class="popup">

          <div class="cont-pop"></div>

          <button id='btn'>close</button>

        </div>

      </div>

`;

  }

  posters += '</div>';

  app.innerHTML = titre + recentFilms + posters;

}

render();

function playPopup() {

  const images = document.querySelectorAll('.img, div.posters');

  const pop = document.querySelectorAll('.popup');

  for (let i = 0; i < images.length; i++) {

    images[i].addEventListener('click', () => {

      if (pop[i].style.display === 'none') {

        pop[i].innerHTML = '<button id="btn" class="btn btn-primary">close</button>';

        pop[i].style.display = 'block';

        pop[i].innerHTML += `

          <div class="pop-titre">titre : ${movies[i].title}</div><br/>

          <div class="pop-titre">genres : ${movies[i].genres}</div><br/>

          <div class="pop-year">year : ${movies[i].year}</div><br/>

          <div class="pop-year">note : ${movies[i].note}</div><br/>

          <div class="pop-year">plot : <br/> ${movies[i].plot}</div><br/>

          `;

        const btn = document.querySelectorAll('#btn');

        btn[i].addEventListener('click', () => {

          pop[i].style.display = 'none';

        });

      } else {

        pop[i].style.display = 'none';

      }

    });

  }

}

playPopup();

function recentFilmsOnly() {

  let recentFilms = '<div class="recent-films">';

  for (let i = 0; i < movies.length; i++) {

    body.addEventListener('click', (e) => {

      if (e.target.matches('#recent')) {

        if (movies[i].year > 2000) {

          if (movies[i].img === true) {

            recentFilms += `

            <div class="films">

              <img src="posters/${movies[i].imdb}.jpg" class="img"/>

              <h5>${movies[i].title}</h5>

            </div>`;

          } else {

            recentFilms += `

              <div class="films">

                <div class="posters">

                <h5>${movies[i].title}</h5>

                </div>

            </div>`;

          }

          recentFilms += `

        <div class="card-body">

          <div class="popup">

            <div class="cont-pop"></div>

            <button id='btn'>close</button>

          </div>

        </div>

        </div>

        </div>

      </div>

  </div>

`;

        }

        const back = '<button id="back" class="btn btn-primary">back</button>';

        recentFilms += '</div>';

        const titreRecentFilms = '<h2>Recent films</h2>';

        app.innerHTML = titreRecentFilms + back + recentFilms;

        playPopup();

        const backBtn = document.getElementById('back');

        backBtn.addEventListener('click', () => {

          document.location.reload();

        });

      }

    });

  }

}

recentFilmsOnly();

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like

Hello there,

It is difficult to tell, without being able to see what movies looks like.

Just on your current workflow: It is more common to make use of the DOM api to manipulate the view: Node - Web APIs | MDN (mozilla.org)
Specifically, it would be a lot more stable, if you left the static elements inside your HTML, and just appended what was necessary - hiding anything else with CSS.

ok. Thanks for your advice !