Cuando escribo algo en la entrada y luego presiono buscar, quiero obtener el título de las películas que tienen esa palabra, ¿cómo hago eso? Estoy usando la API de omdb. Por ejemplo, si busco "Batman", quiero obtener todos los títulos de películas que tengan "Batman". Ahora, cuando busco Batman, solo obtengo una película de Batman.
document.getElementById("getForm").addEventListener("submit", (e) => { e.preventDefault(); loadMovies(document.querySelector("input[name='query']").value); }); function loadMovies(name) { var omdbAPI = new XMLHttpRequest(); var omdbURL = `http://www.omdbapi.com/?t=${name.replace(" ", "%20")}&type=movie&apikey=`; omdbAPI.open("get", omdbURL, true); omdbAPI.onload = function(event) { event.preventDefault(); if (this.status == 200) { var result = JSON.parse(this.responseText); console.log(result); var output = ""; output += '<div class="user">' + '<h3>Titel: ' + result.Title + '</h3>' + '<p>Year: ' + result.Year + '</p>' + '</div>'; document.getElementById('result').innerHTML = output; } else { alert("No results"); } } omdbAPI.send(); } <form action="" method="get" id="getForm"> Movie: <input type="text" name="query"> <button type="submit">Search</button> </form> <div id="result"> </div>No obtiene ningún resultado porque OMDB requiere una clave de API y usted no la proporciona. Al enviar una solicitud GET adecuada, recibe la siguiente respuesta: {"Response":"False","Error":"No API key provided."} .
También está recargando la página al permitir que se produzca la acción de envío de formulario predeterminada, en su lugar, use event.preventDefault() para cancelar la recarga de la página cuando se produce el envío del formulario y luego llamar a su función. Modifiqué su función para incluir un parámetro de nombre para buscar. Lo siguiente debería lograr lo que desea, pero dado que no tiene una clave API, aún no obtendrá ningún resultado. Vaya aquí para obtener una clave de API.
document.getElementById("getForm").addEventListener("submit", (e) => { e.preventDefault(); loadMovies(document.querySelector("input[name='query']").value); }); function loadMovies(name) { var omdbAPI = new XMLHttpRequest(); var omdbURL = `http://www.omdbapi.com/?t=${name.replace(" ", "%20")}&type=movie`; omdbAPI.open("get", omdbURL, true); omdbAPI.onload = function(event) { event.preventDefault(); if (this.status == 200) { var result = JSON.parse(this.responseText); console.log(result); var output = ""; for (var i in result) { output += '<div class="user">' + '<h3>Titel: ' + result.Title + '</h3>' + '</div>'; } document.getElementById('result').innerHTML = output; } else { alert("No results"); } } omdbAPI.send(); } <form action="" method="get" id="getForm"> Movie: <input type="text" name="query"> <button type="submit">Search</button> </form> <div id="result"> </div>