Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

90
Vistas
I am trying to display a quote after typing author name in the textbox but for some reason it is not displaying anything. How should I fix this?

I am getting undefined when I type the author name in the text box and press the button to display the quote. It seems like my button and textbox are not linked together. How can I fix this?

<!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>
7 months ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

your then functions are not correct in the direct result of the fetchAPI you can receive data and to use it you need to run .json() or .text() on it, you can't simply use that result or return it's value ( plus when you use return statement all your next codes will be unreachable) after that you should not assign something to your data variable because it just has new Data fetched from backend, by assigning new value to data you're about to ruin new data

here is how your js should look

     function getQuote() {
       fetch("https://krv1022-motivate.azurewebsites.net/quote")         
         .then( res => res.text() )
         .then( data => {
             document.querySelector(".quote").value = data;
         }
       );
    }

I also provided a fiddle for it but it can't receive data because either your URL is not correct or there is CORS issues

==============================================

one thing that I just noticed, you are receiving Author's name from end user but you are not about to send it to backend!

so perhaps this code is more complete, I assume that you want to send data using GET method and backend wants the name of author to be named getQuotes

7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.