Google Sheets API Write to sheet not working when

I am having problems writing to a Google Sheet and I can not figure out why.

I am new to using this API and have been using the Google API Client Libraries Guides, for the JavaScript client library.

I am trying to build a "Sign In" webpage that keeps track of when someone attends an event. When my page loads it pulls first and last name from a Google Sheet, then displays a list of those names. I want to be able to click on someone's name which would then update the same Google Sheet by putting an 'x' in the Date column for that person's row.

I started by building the ability to pull in the names from the spreadsheet by using: https://github.com/google/google-api-javascript-client/blob/master/samples/authSample.html

This is working.

I then used values/update to build the ability to write to a Google Sheets file.

This is also working.

I am now attempting to put the two together and this is where I am running into problems.

I made a copy of the page that reads from the Sheet and then added the code that writes to the sheet. I am still able to read the sheet and display the list of names but writing no longer works.

Currently I have a link on the page that calls the JavaScript function that writes to the sheet. When I click on this link, the sheet does not get updated, and there are no errors in the browser's JavaScript console. This is happening in both Chrome and Firefox (on Windows 10).

However, if I replace the call to the js function that reads from the sheet with the call to the write function, the sheet does get updated!

function updateSigninStatus(isSignedIn) {
    if (isSignedIn) {
      authorizeButton.style.display = 'none';
      signoutButton.style.display = 'block';
      // buildNamesList();
      nameSignIn();
    } else {
      authorizeButton.style.display = 'block';
      signoutButton.style.display = 'none';
    }
}

note: buildNamesList() is a function that reads then displays the list of names

I don't understand why it works when inside the updateSigninStatus function but not when I call it from a link.

Here is my function (which, for now, just writes to a specific cell):

function nameSignIn() {
  var params = {
    // The ID of the spreadsheet to update.
    spreadsheetId: '[ACTUAL ID REMOVED]',  

    // The A1 notation of the values to update.
    range: 'G5',  // Set this to cell want to add 'x' to.

    // How the input data should be interpreted.
    valueInputOption: 'RAW',  
  };

  var valueRangeBody = {
    "range": "G5",  //Set this to cell want to add 'x' to.
      "majorDimension": "ROWS",
      "values": [
        [ 'x' ]
      ],          

  };

  var request = gapi.client.sheets.spreadsheets.values.update(params, valueRangeBody);
  request.then(function(response) {
    console.log(response.result);
  }, function(reason) {
    console.error('error: ' + reason.result.error.message);
  });
}

Any suggestions on what the problem may be or how I should troubleshoot?

Thank you.

UPDATE

Upon further testing I think I identified where it is failing but I am not sure why.

From my nameSignIn() (see above):

var request = gapi.client.sheets.spreadsheets.values.update(params, valueRangeBody);
request.then(function(response) {
    console.log(response.result);
}, function(reason) {
    console.error('error: ' + reason.result.error.message);
});

Using breakpoints in my developer tools I can see request.then(function(response) get called but it never goes to console.log(response.result); or console.error('error: ' + reason.result.error.message);.

Note: when running this function on my initial write page or when calling nameSignIn from updateSigninStatus(), I do get console.log(response.result); to run.

So I am not sure what is happening after request.then(function(response) runs nor how to troubleshoot it.

Thanks for reading.