No estoy definido cuando escribo el nombre del autor en el cuadro de texto y presiono el botón para mostrar la cita. Parece que mi botón y el cuadro de texto no están vinculados entre sí. ¿Cómo puedo arreglar esto?
<!DOCTYPE html> <html lang="en"> <head> <title>Quotes</title> </head> <body> <label for="getQuotes">Find Quotes (Type Author Name)</label><br> <input type = "text" id="getQuotes" name="getQuotes" placeholder="Search" style="margin:10px" size="50"/><br /> <button id="FetchQuotes" onclick="getQuote()" style="margin:10px">Fetch Quotes</button> <p id="quotes"></p> <p id="author"></p> <script> async function getQuote() { //const author = Boolean(false); let url = 'https://jaw1042-motivate.azurewebsites.net/quote'; let author = document.getElementById('getQuotes').value; if(author) { url = 'https://jaw1042-motivate.azurewebsites.net/quote?author= '; console.log(url + author); } else { console.log(url); } fetch(url) .then(async (response) => { if (response.ok) { console.log("Response code: " + response.status); } else if (response.status === 400) { console.log("Unable to find any quotes by specified author: " + response.status); } else { console.log("No quotes have been loaded: " + response.status); } const val = await response.json(); console.log(val); }).then(data => { document.getElementById('quotes').value = data; document.getElementById('author').value = data; console.log(data); alert(data); }); } </script> </body> </html>sus funciones then no son correctas en el resultado directo de fetchAPI, puede recibir datos y para usarlos necesita ejecutar .json() o .text() en él, no puede simplemente usar ese resultado o devolver su valor ( Además, cuando use la declaración de devolución, todos sus próximos códigos serán inalcanzables) después de eso, no debe asignar algo a su variable de data porque solo tiene nuevos datos obtenidos del backend, al asignar un nuevo valor a los datos, está a punto de arruinar nuevos datos
así es como debería verse tu js
function getQuote() { fetch("https://krv1022-motivate.azurewebsites.net/quote") .then( res => res.text() ) .then( data => { document.querySelector(".quote").value = data; } ); }También le proporcioné un violín, pero no puede recibir datos porque su URL no es correcta o hay problemas de CORS
==============================================
Una cosa que acabo de notar es que está recibiendo el nombre del autor del usuario final, ¡pero no está a punto de enviarlo al backend!
entonces quizás este código sea más completo, asumo que desea enviar datos usando el método GET y el backend quiere que el nombre del autor se llame getQuotes