How to use Drive Api and Sheets Api together in Javascript

I want to use the Drive Api and the Sheets Api together but I am getting error while implementing it. Many solution are there with Node.js,etc language but i want with front end javascript. The code used by me is overview of Api from the docs. https://developers.google.com/drive/api/v3/quickstart/js and https://developers.google.com/sheets/api/quickstart/js. And the error is Error Image. While there is no error in using drive api its works fine ,but while using the Sheet Api together it make the above error, is there any soultion.
` function handleClientLoad() {
gapi.load(‘client:auth2’, initClient);
}

/**
 *  Initializes the API client library and sets up sign-in state
 *  listeners.
 */
function initClient() {
  gapi.client.init({
    apiKey: API_KEY,
    clientId: CLIENT_ID,
    discoveryDocs: DISCOVERY_DOCS,
    scope: SCOPES
  }).then(function () {
    // Listen for sign-in state changes.
    gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

    // Handle the initial sign-in state.
    updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
    authorizeButton.onclick = handleAuthClick;
    // signoutButton.onclick = handleSignoutClick;
  }, function (error) {
    appendPre(JSON.stringify(error, null, 2));
  });
}

/**
 *  Called when the signed in status changes, to update the UI
 *  appropriately. After a sign-in, the API is called.
 */
function updateSigninStatus(isSignedIn) {
  if (isSignedIn) {
    authorizeButton.style.display = 'none';
    // signoutButton.style.display = 'block';
    listFiles();
  } else {
    authorizeButton.style.display = 'block';
    // signoutButton.style.display = 'none';
  }
}


/**
 *  Sign in the user upon button click.
 */
function handleAuthClick(event) {
  gapi.auth2.getAuthInstance().signIn();
}

function handleSignoutClick(event) {
  gapi.auth2.getAuthInstance().signOut();
}
 function appendPre(name, id) {
  // var pre = document.getElementById('content');
  // var textContent = document.createTextNode(message + 'n');
  // pre.appendChild(textContent);
  var x = document.createElement("INPUT");
  x.setAttribute("type", "radio");
  x.setAttribute("id", id)
  x.setAttribute("name", "rad")
  x.setAttribute("value", id)
  x.setAttribute("class", "form-check-input mt-2")
  x.setAttribute("style", "margin-left: 47%;")
  x.setAttribute("onclick", "getid(this)")
  var y = document.createElement("label");
  y.setAttribute("for", "id");
  y.setAttribute("class", "form-check-label")
  y.setAttribute("style", "margin-left: 5px;")
  y.innerText = name;
  var division = document.getElementById("radi");
  division.append(x)
  division.append(y)
  var z = document.createElement("br");
  division.append(z)
}

/**
 * Print files.
 */
function listFiles() {
  gapi.client.drive.files.list({
    'q': "mimeType='application/vnd.google-apps.spreadsheet'",
    'pageSize': 10,
    'fields': "nextPageToken, files(id, name)"
  }).then(function (response) {
    // appendPre('Files:');
    var files = response.result.files;
    if (files && files.length > 0) {
      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        appendPre(file.name, file.id);
      }
    } else {
      appendPre('No files found.');
    }
  });
}
   </script>
    <script>
var currentId;
function getid(value) {
  currentId = value.value;
  console.log(currentId);
  var btn = document.getElementById("importData");
  if (btn.style.display == "none") {
    btn.style.display = "block";
  }
}


 var authorizeButton1 = document.getElementById('authorize_button1');
  if (authorizeButton1.style.display == "none") {
    authorizeButton1.style.display = "block";
  }
  handleClientLoad2();
  function handleClientLoad2() {
    console.log("handleClientLoad");
    gapi.load('client:auth2', initClient2);
  }
  // var CLIENT_ID = ;
  
  var signed = false;
  function initClient2() {
    console.log("initClient2-1");

    gapi.client.init({
      apiKey: API_KEY,
      clientId: Client,
      discoveryDocs: discoverydoc,
      scope: scop
    }).then(function () {
      console.log("initClient2-2");
      gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
      console.log("initClient2-3");
      updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
      authorizeButton1.onclick = handleAuthClick1;
      // signoutButton.onclick = handleSignoutClick;
    }, function(error) {
      appendPre(JSON.stringify(error, null, 2));
    });
  }
  function updateSigninStatus(isSignedIn) {
    if (isSignedIn) {
      console.log("updateSigninStatus if");
      // authorizeButton1.style.display = 'none';
      // listMajors();
    } else {
      authorizeButton1.style.display = 'block';
      console.log("updateSigninStatus else");
    }
    
  }
  async function handleAuthClick1(event) {
    console.log("handleAuthClick");
    var responce = await gapi.auth2.getAuthInstance().signIn();
    console.log(responce);
    var response1 = await listMajors();
  }
  // function handleSignoutClick(event) {
  //   gapi.auth2.getAuthInstance().signOut();
  // }
  /**
   * Append a pre element to the body containing the given message
   * as its text node. Used to display the results of the API call.
   *
   * @param {string} message Text to be placed in pre element.
   */
  function appendPre(message) {
    var pre = document.getElementById('content');
    var textContent = document.createTextNode(message + 'n');
    pre.appendChild(textContent);
  }
  // initClient2()
  function listMajors() {
    console.log("listMajors");
    console.log(currentId);
    gapi.client.sheets.spreadsheets.values.get({
      spreadsheetId: currentId,
      range: 'Class Data!A2:C',
    }).then(function(response) {
      var range = response.result;
      if (range.values.length > 0) {
        appendPre('Name, Major:');
        for (i = 0; i < range.values.length; i++) {
          var row = range.values[i];
          appendPre(row[0] + ', ' + row[2]);
        }
      } else {
        appendPre('No data found.');
      }
    }, function(response) {
      appendPre('Error: ' + response.result.error.message);
    });
  }

}`

here in above code I removed the variables of init but i am garanteed that they are right ,the docs is [“https://sheets.googleapis.com/$discovery/rest?version=v4”] and scope is ‘https://www.googleapis.com/auth/spreadsheets.readonly’. As I don’t wanna reveal my api key and Client Id id I removed it. Pls help if you understand. And as I am logged in in drive api the status is sayed logged in so I changed the code little bit of sheet api than docs . Hope you reply