Google Sheets侧边栏用户输入获取问题：需实现日志记录及新表创建

Hey there! Let's fix that sidebar input issue step by step. I've gone through your code and spotted a few key problems that are keeping you from capturing the user's input:

• You had a typo: google.spript.run should be google.script.run (note the correct spelling of "script")
• Your buttons weren't properly extracting the input value or sending it to your backend script
• The onSuccess function in your .gs file tried to use frontend DOM methods (like document.getElementById) — those only work in HTML/JS, not in Google Apps Script's server-side environment
• You weren't passing the user's input from the sidebar to your backend function at all

Here's the fixed code for both files:

1. Updated HTML (firstTime.html) #

This version adds frontend logic to grab the input value and send it to your backend, plus proper success handling:

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>
<body>
  <div>
    <form id="firstTimeForm">
      Class Name: <br/>
      <input type="text" placeholder="***Year 9 ***" id="classNameInput" name="className">
    </form>
    <button onclick="submitClassName()">Save</button>
    <input type="button" value="Close Sidebar" onclick="google.script.host.close()" />
  </div>

  <script>
    // Frontend function to capture input and send to backend
    function submitClassName() {
      const className = document.getElementById('classNameInput').value;
      // Call backend function and trigger success handler when done
      google.script.run.withSuccessHandler(onSuccess).processClassName(className);
    }

    // Frontend success feedback
    function onSuccess() {
      alert('Class name logged successfully! Check the script logs to see it.');
      document.getElementById('classNameInput').value = ''; // Clear input after submission
    }
  </script>
</body>
</html>

2. Updated Google Apps Script (.gs file) #

This version replaces your broken onSuccess function with a backend function that receives the input and logs it:

var ss = SpreadsheetApp.getActive();

function onOpen() {
  var menu = [{name:"Setup Markbook", functionName:"firstTime"}];
  ss.addMenu("MarkBook", menu);
}

function firstTime(){
  var ui = SpreadsheetApp.getUi();
  var html = HtmlService.createHtmlOutputFromFile('firstTime.html').setTitle('Setup Markbook');
  ui.showSidebar(html); // Reuse the existing ui variable instead of calling getUi() twice
}

// Backend function to receive and log the class name
function processClassName(className) {
  Logger.log('User entered class name: ' + className);
  
  // Later, you can add your new sheet creation logic here, like:
  // ss.insertSheet(className);
  
  return 'Success'; // Sends a response to the frontend's success handler
}

How to test this: #

1. Save both files in your script editor
2. Refresh your Google Sheet
3. Open the MarkBook menu and select Setup Markbook
4. Enter a class name and click "Save"
5. To view the log:
   • Open the script editor again
   • Go to View > Logs (or press Ctrl+Enter/Cmd+Enter)

You'll now see the user's input show up in the logs, and you can expand the processClassName function later to create your new sheet using the className parameter.

内容的提问来源于stack exchange，提问作者Chris Shortreed