I have the following .gs:
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('index')
}
function goToMaster() {
const ss = SpreadsheetApp.getActiveSpreadsheet()
const sheet = ss.getSheetByName('Master Projects')
sheet.activate()
}
The goToMaster() function activates a sheet called "Master Projects"
When running the function by itself, it works properly. However I created an index.html ui to trigger this function by clicking on a div:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="icon" href="/images/favicon.svg" />
<script src="https://kit.fontawesome.com/abd2f5db30.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="card card--1" id="master-projects">
<div class="container">
<h2>Master Projects</h2>
<i class="fa-solid fa-diagram-project"></i>
</div>
<script>
const masterProjects = document.getElementById('master-projects');
masterProjects.addEventListener('click', doStuff);
function doStuff() {
google.script.run.goToMaster();
}
</script>
</body>
</html>
When clicking the div, nothing happens! I looked everywhere to find a solution but nothing has worked so far.
Any idea what might be causing this?
html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="icon" href="/images/favicon.svg" />
<script src="https://kit.fontawesome.com/abd2f5db30.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="card card--1">
<div class="container">
<h2>Master Projects</h2>
<i class="fa-solid fa-diagram-project" id="master-projects"></i>
</div>
<script>
window.onload = function() {
const masterProjects = document.getElementById('master-projects');
masterProjects.addEventListener('click', doStuff);
}
function doStuff() {
google.script.run.goToMaster();
}
</script>
</body>
</html>
gs:
function goToMaster() {
const ss = SpreadsheetApp.getActiveSpreadsheet()
const sheet = ss.getSheetByName('Master Sheet')
sheet.activate()
}
function launchadialog() {
const ui = SpreadsheetApp.getUi();
ui.showModelessDialog(HtmlService.createHtmlOutputFromFile("ah2"),"Title")
}