Javascript function does not return a value

Question

Javascript function does not return a value

Having trouble retrieving a string value from this function:

function loadPage(url) {
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", url, true);
    xhttp.send();

    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            //var html = xhttp.responseText
            var html = document.documentElement.outerHTML;
            return html
        }
    }
}

console.log(loadPage("http://stops.lt/vilnius/#trol/2/a-b"))

Although console.log(html) prints the correct results within the xhttp.onreadystatechange, I'm struggling to understand how to return loadPage(url). I've tried both return xhttp.onreadystatechange and

return xhttp.onreadystatechange()

, but neither of them seem to work.

javascript ajax xmlhttprequest

Answer 1

Answer №1

The function loadPage has been updated to include an asynchronous feature, requiring the use of a callback function or Promise:

const retrievePage = (url, cb) => {
    const request = new XMLHttpRequest();
    request.open("GET", url, true);
    request.send();

    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status === 200) {
            //const htmlContent = request.responseText;
            const htmlContent = document.documentElement.outerHTML;
            cb(htmlContent);
        }
    }
}
retrievePage("http://example.com/page", (html) => {
    console.log(html);
});

Answer 2

The function loadPage has been updated to include an asynchronous feature, requiring the use of a callback function or Promise:

const retrievePage = (url, cb) => {
    const request = new XMLHttpRequest();
    request.open("GET", url, true);
    request.send();

    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status === 200) {
            //const htmlContent = request.responseText;
            const htmlContent = document.documentElement.outerHTML;
            cb(htmlContent);
        }
    }
}
retrievePage("http://example.com/page", (html) => {
    console.log(html);
});

Javascript function does not return a value

Answer №1

Similar questions

Optimal code structuring for a javascript plugin

Is it possible to adjust the height of the apprequests dialog?

Tips for preventing redirection to the login page upon page refresh in a next.js application

Using jQuery to prepend elements and then fade them in

The malfunctioning of dynamic className styling in React applications

Merging object keys and values from JSON arrays based on their keys, using JavaScript

When the user clicks, position a div directly below another div

Retrieving object key value from an array using Underscore.js

Rails Unobtrusive JavaScript (UJS) does not seem to be connecting the data-remote

Struggling to locate the correct setup for .babel and react-hot-loader

`quill-emoji : The emoji fails to render properly`

How can you assign a strokeStyle color to a Canvas using a CSS property?

Storing data in the database using Laravel and Ajax

How can scriptlets be used to dynamically create a properly functioning model?

Exploring the intricacies of mapping an Array of Arrays

What causes the elements in my JSON file to load in a seemingly random order when clicked on?

Problem with dynamic page routes in Next.js (and using TypeScript)

What steps should I take to resolve the issue of my endpoint failing to accept POST requests?

"AngularJS View Source Page: Unveiling the Power of Dynamic Metatags

Tips for setting NgForm value within an Observable and verifying its successful implementation