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>
{ }
y asi el texto tomara formato de código.}
, la llave que cierra la función, a mí me funciona bien no más me fallaba en eso.