JavaScript project not shwoing any errors yet not performing the task

Hi, So was following a tutorial the GitHub links for the projects are here https://github.com/florinpop17/10-projects-10-hours

The current project is the Movie-App

The search function is not working - so when I search for a movie it should show up yet it is not any help would be much appriciated thanks

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viweport" content="width=device-width, initial-scale=1.0">

    <title>Movie App</title>

<link href="css/style.css" rel="stylesheet" type="text/css">



  </head>

  <body>

    <header>

      <form id = form>

        <input type="text" id="search"
        placeholder="Search Movies"
        class ="search"

        />

      </form>
// code stopped at 5hr 26min

    </header>

      <main id = "main"> </main>

  </body>
<script src="js/script.js" type="text/javascript"></script>

</html>


const APIURL =
   "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1";
const IMGPATH = "https://image.tmdb.org/t/p/w1280";
const SEARCHAPI =
   "https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query=";

const main = document.getElementById('main');
const form = document.getElementById('form');
const search = document.getElementById('search').value;


// initially to get fav movies

 getMovies(APIURL);

async function getMovies(url) {

 const resp = await fetch(url);
 const respData = await resp.json();


 showMovies(respData.results);


 }

function showMovies(movies){

 // clear main

 main.innerHTML= ' ';
   movies.forEach((movie) => {

     const {poster_path, title, vote_average
     } = movie;

     const movieEl = document.createElement('div');

     movieEl.classList.add('movie');


     movieEl.innerHTML = `

     <img src="${IMGPATH + poster_path}"
        alt="${title}"
        />
         <div class="movie-info">
           <h3>${title} </h3>
           <span class = "${getClassByRate(vote_average)}">
           ${vote_average} </span>

       </div>

     `;

     main.appendChild(movieEl);

   });


 }


 function getClassByRate(vote){

   if (vote >= 7.5){
     return 'green';

   } else if (vote >= 6 ){
     return 'orange';

   } else {
     return 'red';
   }


 }


   form.addEventListener('submit', (e) => {

     e.preventDefault();

     const searchTerm = search.value;

     if(searchTerm){
       getMovies(SEARCHAPI + searchTerm);

       search.value = "";
     }


   });

You are getting the value property twice on the input element. Once in the getElementById selector (before it has a value) and then again in the submit handler (where you are passing it the empty value and not the element).

Remove the .value on the getElementById selector for the input element and just get the value from the element in the submit handler.

So this:

const search = document.getElementById("search");

And not this:

const search = document.getElementById('search').value;
1 Like

Thank you, it is working as it should, much appreciated :hugs: