How to send JavaScript data to Google Apps Script function in Google Sheets

Other Questions Google Sheets
1

I’m working on a web app that needs to send data from client-side JavaScript to a Google Apps Script function. I have an HTML page with an image element and I want to get the image source when someone clicks on it.

<div>
  <img src="imageSource" id="photoElement" onclick="capturePhotoUrl()" />
</div>

<script>
  function capturePhotoUrl() {
    var imageUrl = document.getElementById('photoElement').src;
    google.script.run
      .updateSpreadsheetCell();
  }
</script>

I’m struggling to pass the JavaScript variable to my Google Apps Script function. I want to put this image URL into a spreadsheet cell like this:

function updateSpreadsheetCell() {
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var currentRange = spreadsheet.getActiveRange();
  
  currentRange.setValue(imageUrl);
}

I tried different approaches but the variable doesn’t seem to transfer properly. I also tested with this setup:

<div id="photoContainer">
  <img src="https://example.com/photo.jpg" id="photoContainer" onclick="handleClick()" />
</div>
<script>
  function handleClick() {
    var url = document.getElementById('photoContainer').src;
    google.script.run.updateSpreadsheetCell(url);
  }
</script>

And the corresponding server function:

function updateSpreadsheetCell(url) {
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var selectedRange = spreadsheet.getActiveRange();
  
  selectedRange.setValue(url);
}

Both approaches with and without the parameter don’t work as expected. What am I missing here?

2

Check your HTML file deployment too - make sure it’s set as a web app with execute permissions for ‘anyone’ or ‘anyone with the link’. I’ve hit this exact problem where the code looked fine but google.script.run failed silently because of permissions. Try adding error handling like google.script.run.withFailureHandler(onFailure).updateSpreadsheetCell(url) to see what’s actually breaking

3

You’ve got an ID conflict - both your div and img are using “photoContainer”. When getElementById runs, it doesn’t know which one you want. I ran into this same thing when I started with Apps Script. Easy fix: give each element its own ID. Try this:

Then update your JavaScript: function handleClick() { var url = document.getElementById(‘photoImage’).src; google.script.run.updateSpreadsheetCell(url); } Your server-side function looks good. Once you fix the ID problem, google.script.run will work fine. I’ve used this setup tons of times - it’s solid for moving data from client to server in Apps Script.

4

Make sure you’ve got a cell selected when the function runs. I learned this the hard way - getActiveRange() crashes if nothing’s selected, which happens way more than you’d expect in web apps. Skip the active range completely and just target the exact cell you want. Replace your server function with this: function updateSpreadsheetCell(url) { var spreadsheet = SpreadsheetApp.getActiveSpreadsheet(); var sheet = spreadsheet.getActiveSheet(); sheet.getRange(‘A1’).setValue(url); } You’re hitting a specific cell instead of guessing what the user selected. Also check that your script’s actually bound to the right spreadsheet - I’ve burned hours debugging perfect code that was running on the wrong file.