Preview Email Template based on drop down, Send email once your satisfuied

in my Google Sheets app script, I currently have three template.html files and a few scripts; I'd like to create a preview email and send it to the user once he or she is satisfied; however, the event listeners that (openAI) built for me do not work; when I change the Drop Down Menu or click send Button, nothing happens and the preview does not load. When I ask the AI for help, it keeps modifying my code; My code no longer looks like the original; after a week of trying, I've realized that I need assistance with this. Here's my most recent code as of today. The AI also insisted on using Google Drive, which I declined because I have the HTML files in the app scrip sheet itself and used to obtain it with this.

This code is not used anymore, But use to work when I used it in GmailApp to get the template File Name.

var html = HtmlService.createTemplateFromFile('Proposal Template.html');  
var html = HtmlService.createTemplateFromFile('Marketing Template.html');  
var html = HtmlService.createTemplateFromFile('Trusted Partner Template.html'); 

Keep in mind that while I am not an expert in Jave or JS, I am familiar with them.

My code

function showEmailPreview() {
  // Get values from the active sheet and active row
  var sheet = SpreadsheetApp.getActiveSheet();
  var row = sheet.getActiveRange().getRowIndex();
  var userEmail = sheet.getRange(row, getColIndexByName("Primary Email")).getValue(); 
  var userFullName = sheet.getRange(row, getColIndexByName("Contact Full Name")).getValue();  
  var userCompanyName = sheet.getRange(row, getColIndexByName("Company Name")).getValue();  
  var title = sheet.getRange(row, getColIndexByName("Title")).getValue();   
  var company_location = sheet.getRange(row, getColIndexByName("Company Location")).getValue();    
  var company_phone1 = sheet.getRange(row, getColIndexByName("Company Phone 1")).getValue();    
  var subjectLine = "Company Proposal - " + userCompanyName;
 
  // Create the select element
  const select = `
    <select id="template-select">
      <option value="Proposal Template.html">Proposal Template</option>
      <option value="Marketing Template.html">Marketing Template</option>
      <option value="Trusted Partner Template.html">Trusted Partner Template</option>
    </select>
  `;

  // Create the button element
  const button = `<button id="send-button">Send Email</button>
<div id="preview"></div>`; //This could be a issue? The ai did not know where to place this or cut down before giving me a proper answer. 

  // Create an HTML output page that displays the email template, the select element, and a button to send the email
  var output = HtmlService.createHtmlOutput(`
    <script>
      var buttonElement;
  
  function getElementById(id) {
    return document.getElementById(id);
  }

  function init() {
    // Add a change event listener to the select element
    document.getElementById('template-select').addEventListener('change', function() {
      // Get the selected template file name
      var templateFile = this.value;
      
      // Read the contents of the selected file
      var template = readFile(templateFile);
      
      // Set values in the template
      var html = HtmlService.createTemplate(template);
      html.userFullName = userFullName;
      html.userCompanyName = userCompanyName;
      html.title = title;
      html.company_location = company_location;
      html.company_phone1 = company_phone1;
      
      // Get the filled-in email template as a string
      var emailTemplate = html.evaluate().getContent();
      
      // Update the preview window with the selected template
      document.getElementById('preview').innerHTML = emailTemplate;
    });
    
    // Add a click event listener to the button element
    buttonElement = getElementById('send-button');
    buttonElement.addEventListener('click', function() {
      // Get the selected template file name
      var templateFile = document.getElementById('template-select').value;
      // Pass the selected template file name as an argument to the sendEmail function
      sendEmail(templateFile);
    });
  }

  window.onload = init; 
 
function sendEmail(templateFile) {
  // Read the contents of the selected file
  var template = readFile(templateFile);

  // Set values in the template
  var html = HtmlService.createTemplate(template);
  html.userFullName = userFullName;
  html.userCompanyName = userCompanyName;
  html.title = title;
  html.company_location = company_location;
  html.company_phone1 = company_phone1;
  
  // Get the filled-in email template as a string
  var emailTemplate = html.evaluate().getContent();
  
  // Send the email
  GmailApp.sendEmail(userEmail, subjectLine, '', {htmlBody: emailTemplate});
}  
 
    </script>
    <script>
  init();
</script>

    ${select}
    ${button}
  
  `)
    .setWidth(950)
    .setHeight(750)
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);

// Display the output page in a modal dialog box

SpreadsheetApp.getUi().showModalDialog(output, 'Email Preview');
//output.evaluate();
//window.onload = init;


};
function readFile(templateFile) {
  // Get the contents of the selected file
  var file = DriveApp.getFilesByName(templateFile);
  var contents = file.next().getBlob().getDataAsString();
  return contents;
}//window.onload = init;

Results.

Here is a link for testing.
https://docs.google.com/spreadsheets/d/1gXDbtjCYfZw8kOaOMorbJ54dXyl7bh6MFM1LopTrNww/edit?usp=sharing

Its always like this when you struggle for a week and give up, And you finally post something and then you find yourself a solution. So here is the correct way of doing it.

Let's first talk about the menu. I created a file template-select-menu.gs

<form>
  <label for="template">Select a template:</label><br>
  <select id="template" name="template">
    <option value="Proposal Template.html">Proposal Template</option>
    <option value="Markting Template">Marketing Template</option>
  </select>
  <br><br>
  <input type="button" value="Preview" onclick="google.script.run.onTemplateSelected(document.forms[0].template.value)">
</form> 

then I have my preview_email.gs

function showEmailPreview() {
  // Get values from the active sheet and active row
  var sheet = SpreadsheetApp.getActiveSheet();
  var row = sheet.getActiveRange().getRowIndex();
  var rate = sheet.getLastRow();
  var userEmail = sheet.getRange(row, getColIndexByName("Primary Email")).getValue(); 
  var userFullName = sheet.getRange(row, getColIndexByName("Contact Full Name")).getValue();  
  var userCompanyName = sheet.getRange(row, getColIndexByName("Company Name")).getValue();   
  var subjectLine = "Company Proposal - " + userCompanyName ;
  var aliases = GmailApp.getAliases()

  // Create the email template selection menu
  var proposalTemplate = HtmlService.createTemplateFromFile('Proposal Template.html');
  var marktingTemplate = HtmlService.createTemplateFromFile('Markting Template.html');

  var selectMenu = HtmlService.createTemplateFromFile('template-select-menu.html');
  var selectMenuHtml = selectMenu.evaluate().getContent();

  // Create an HTML output page that displays the email template selection menu and a button to send the email
  var output = HtmlService.createHtmlOutput(selectMenuHtml)
      .setWidth(600)
      .setHeight(450);

  // Display the output page in a modal dialog box
  SpreadsheetApp.getUi().showModalDialog(output, 'Email Preview');
}

/**
 * This function is called when the user selects a template from the drop-down menu.
 * It creates an email preview using the selected template and displays it in the modal dialog box.
 */
//var html = HtmlService.createTemplateFromFile(templateFileName);


function onTemplateSelected(templateFileName) {
  // Get values from the active sheet and active row
  var sheet = SpreadsheetApp.getActiveSheet();
  var row = sheet.getActiveRange().getRowIndex();
  var rate = sheet.getLastRow();
  var userEmail = sheet.getRange(row, getColIndexByName("Primary Email")).getValue(); 
  var userFullName = sheet.getRange(row, getColIndexByName("Contact Full Name")).getValue();  
  var userCompanyName = sheet.getRange(row, getColIndexByName("Company Name")).getValue();   
  var subjectLine = "Company Proposal - " + userCompanyName ;
  var aliases = GmailApp.getAliases();

  // Create the email template and set values in the template 
  if (templateFileName == 'Proposal Template.html') {
    var proposalTemplate = HtmlService.createTemplateFromFile('Proposal Template.html');
    proposalTemplate.userFullName = userFullName;
    proposalTemplate.userCompanyName = userCompanyName;
    var template = proposalTemplate.evaluate().getContent();
  } else if (templateFileName == 'Markting Template') {
    var marktingTemplate = HtmlService.createTemplateFromFile('Markting Template.html');
    marktingTemplate.userFullName = userFullName;
    marktingTemplate.userCompanyName = userCompanyName;
    var template = marktingTemplate.evaluate().getContent();
  } else {

    var template = selectMenuHtml;
  } 

  // Create an HTML output page that displays the email template and a button to send the email
    var selectMenu = HtmlService.createTemplateFromFile("template-select-menu.html");
    var selectMenuHtml = selectMenu.evaluate().getContent();

  var output = HtmlService.createHtmlOutput(template)
      .setWidth(600)
      .setHeight(450)
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setContent(selectMenuHtml + '<br><br>' + template);
  // Update the modal dialog box with the new email template
  SpreadsheetApp.getUi().showModalDialog(output, 'Email Preview');
}

Now create the the 2 files "Proposal Template.html" and "Markting Template.html". When you switch and click preview the content will change.
Please note that I still need to update the email buttons. but this is a great start for me.