How to load functions based on the page title of an HTML page created and shown using showModalDialo-CodePudding

I'm creating a web page, whose title may change depending on which button the user clicks. When the page loads its HTML part, I'd like to run a function of 2 depending on the pageTitle passed.

I'm not sure why this is not working the way it and I'd appreciate a helping hand:

Function to display the page

function showPoPage(poPage, pageTitle) {
  const template = HtmlService.createTemplateFromFile(poPage);
  const html = template.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  html.setWidth(1400).setHeight(800)
  SpreadsheetApp.getUi().showModalDialog(html, pageTitle);
}

The script piece which doesn't seem to be running correctly

...(embeded into the HTML)
<script>
const pageTitle = document.getElementByClassName('modal-dialog-title-text').innerText;
console.log('Page Title found on top: '   pageTitle)// Nothing shows in the logs
if (pageTitle == 'Edit PO') {
  loadPODataToEdit();
} else if (pageTitle === 'Fabric-Colombia PO') {
  loadOrderPosFromSS();
  loadUnit();
}
</script>

The error in the console

Uncaught TypeError: document.getElementByClassName is not a function

I'm not sure what the rules are for running this script containing such criteria and behavior.

Thank you!

CodePudding user response：

From your showing script, it seems that you are using HTML template. I thought that this might be able to be used for achieving your goal. When this is reflected in your script, how about the following modification?

Google Apps Script side:

function showPoPage(poPage, pageTitle) {
  const template = HtmlService.createTemplateFromFile(poPage);
  template.title = pageTitle; // <--- Added
  const html = template.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  html.setWidth(1400).setHeight(800)
  SpreadsheetApp.getUi().showModalDialog(html, pageTitle);
}

HTML side:

...(embeded into the HTML)
<script>
const pageTitle = "<?!= title ?>"; // <--- Modified
console.log('Page Title found on top: '   pageTitle)// Nothing shows in the logs
if (pageTitle == 'Edit PO') {
  loadPODataToEdit();
} else if (pageTitle === 'Fabric-Colombia PO') {
  loadOrderPosFromSS();
  loadUnit();
}
</script>

By this modification, you can run the functions by the value of pageTitle.