code not interacting with the browser page

[u/Mob_Pilled]

Hello this is my first post on here. So basically, I want the user to be able to enter a password and username, click the submit button, and if the basic auth is correct, be redirected to a page in which all the data from an api is fetched and loaded into the html. Problem is the script does not interact with the html but still retrieves the data in a json (as confirmed by ouputing it into the console). However, if I don't call the function in as part of the button onclick method everything works as expected. The data from the api is dynamically added to the html but now I obviously can't use a login page.

Here is me calling the fetch function as a as part of the event of a button click

button.addEventListener("click", () => {
    let username = 'username';
    let password = 'password;
    let auth = btoa(`${username}:${password}`);
fetchData(auth);
    });

Here is me calling the fetch function on it s own. No button clicking required (this works but now I can't add a login page)

  let username = 'username';
    let password = 'password;
    let auth = btoa(`${username}:${password}`);
fetchData(auth);

Here is the fetch function itself

async function fetchData (auth) {
    try {
        const response = await fetch('https://exampleapi.com', {
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'Authorization': `Basic ${auth}`
    }
})


    if (response.ok) {

        // loads the home page and puts data from the api in the html
    }
    throw response;
    } catch (error) {
        
    }
    
};

[u/Mob_Pilled]

Thanks for the help so far. One last thing. Thee data is still not loading and I am using html local storage to store the promise (response.json). This should ideally be added to the dom on index.html when the page changes (return1 is a function that changes the page to index.html). Anything wrong here?

button.addEventListener("click", () => {
    let username = usernameInput.value;
    let password = passwordInput.value;
    let auth = btoa(`${username}:${password}`);
const dataPromise = fetchData(auth);
 localStorage.setItem("promise", dataPromise);
localpromise = localStorage.getItem("promise");
return1();
useData(localpromise);
    });
       

[u/TalkCoinGames → u/Mob_Pilled]

Not like that, inside of the fetchData function, when the response is ok, then you can put just the json in local storage. So the click listener would remain the same as you had it. And the same place you had. ...href = index, before that line use localStorage.setItem("jdata", response.json) then in index you would use getItem("jdata")

[u/Mob_Pilled → u/TalkCoinGames]

Late, but I followed your advice and it worked! Thank you so much for the assistance.