2

Estoy intentando hacer una pequeña pagina donde digite el nombre de una canción cualquiera y Google me devuelva el resultado a través de su API de búsqueda, pero al hacer Clic en el botón buscar, no pasa nada y en consola me sale este mensaje. Que puede estar pasando?:

"Uncaught SyntaxError: Unexpected end of input" "Uncaught ReferenceError: buscarCancion is not defined at HTMLInputElement.onclick(index.html:11:67)"

<!DOCTYPE html>
<html>
<head>
   <title>Búsqueda de canción</title>
</head>
<body>
    <h1>Búsqueda de canción</h1>
    <form>
        <label for="txtNombreCancion">Nombre de la canción:</label> <br>
        <input type="text" id="txtNombreCancion" value=""><br>
        <input type="button" value="Buscar" onclick="buscarCancion()">
   </form>
   <div id="resultado"></div>

 <script>

    function buscarCancion() {
    // Obtenemos el nombre de la canción del campo de texto
    var nombreCancion = document.getElementById("txtNombreCancion").value;

    // Creamos la URL de la solicitud a la API de búsqueda de Google
    var apiKey = "AIzaSyD0pnoN8kCr0qtdgXbYNuJq_k_Kq1rRrj8";
    var cx = "f180285ff9ce54b78";
    var query = "quién canta " + nombreCancion;
    var url = "https://www.googleapis.com/customsearch/v1?key=" + apiKey + "&cx=" + cx + "&q=" + encodeURIComponent(query);

    // Hacemos la solicitud a la API de búsqueda de Google con fetch
    fetch(url)
      .then(function(response) {
        return response.json();
      })
      .then(function(data) {
        // Obtenemos el primer resultado de la búsqueda
    var resultado = data.items[0];

    // Mostramos el título y la descripción del resultado en el div
    var div = document.getElementById("resultado");
    div.innerHTML = "<h2>" + resultado.title + "</h2>" + "<p>" + resultado.snippet + "</p>";
  })
  .catch(function(error) {
    console.log(error);
  });

</script>
3
  • Edita tu pregunta - Copia y pega el código, luego sombreas el texto del código (Seleccionalo) mientras esta sombreado arriba en la barra de herramientas de editación le das al botón con el icono { } y asi el texto tomara formato de código.
    – JoseMgz_Ux
    Commented el 23 dic. 2022 a las 16:43
  • Y borra la respuesta de abajo, ese es solo espacio para respuestas si tienes alguna duda o pregunta la haces aquí en comentarios.
    – JoseMgz_Ux
    Commented el 23 dic. 2022 a las 16:44
  • Debajo del catch o sea al final te falta una llave }, la llave que cierra la función, a mí me funciona bien no más me fallaba en eso.
    – JoseMgz_Ux
    Commented el 23 dic. 2022 a las 19:46

1 respuesta 1

0

Primer error: Uncaught SyntaxError: Unexpected end of input

Referencia

El error "Uncaught SyntaxError Unexpected end of input" se produce para 3 principales Razones:

Olvidar un paréntesis de cierre, corchete o cita.

Intentando analizar una respuesta vacía con o .JSON.parse() $.parseJSON

Obtener una respuesta o ninguna respuesta de un servidor e intentar para analizarlo como JSON.text/html

Segundo error: Uncaught ReferenceError: buscarCancion is not defined at HTMLInputElement.onclick

Según lo que investigue tiene que ver con las etiquetas <script></script> aunque no le vi problema alguna diría que es derivado del primer error.

function buscarCancion() {
    fetch(url)
      .then(function(response) {
        //...
      })
      .then(function(data) {
       //...
    })
    .catch(function(error) {
       //...
    })
}// <--- Llave que faltaba
2
  • Gracias, donde faltaría esa llave?
    – Jose Henao
    Commented el 23 dic. 2022 a las 20:24
  • Ya lo corregí. Gracias!!
    – Jose Henao
    Commented el 23 dic. 2022 a las 20:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.