A Button on a sidebar project to include a line on a spreadsheet is not working-CodePudding

I´m creating a SideBar project, following this tutorial

https://www.youtube.com/watch?v=yZNPkcT4PKA&list=PLv9Pf9aNgemuzTNWeHd8HziGVNzSlWACh&index=3

With all the code baked, my button doesn´t work. I´ve triple checked evertything but don´t find any. Don´t know if it´s a concept or sintax error. Included Bootstrap V.4.1.3 as the one followed by the tutorial.

uform.html

!doctype html>
<html lang="en">
<head>
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <!-- Bootstrap CSS -->
  <link rel="stylesheet" 
   href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
   integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
   crossorigin="anonymous">
   <title>My SideBar</title>
</head>
<body>
    <div>
          <div >
             <label for="nombre-cliente" >Cliente</label>
             <input type="text"  id="nombre-cliente">
         </div>
         <div >
             <label for="nombre-proyecto" >Proyecto</label>
             <input type="text"  id="nombre-proyecto">
         </div>
        <button   id="mainButton">Submit</button>
   </div>
         <!-- Optional JavaScript -->
         <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384- 
         q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" 
         crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity="sha384-ZMP7rVo3mIykV 2 9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
        integrity="sha384-ChfqqxuZUCnJSK3 MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
        crossorigin="anonymous"></script>
   <script>
        fuction afterButtonClicked(){
          var Cliente = document.getElementByID("nombre-cliente");
          var Proyecto= document.getElementByID("nombre-proyecto"); 
          var rowData = {Cliente:Cliente.value, Proyecto:Proyecto.value};
          google.script.run.addNewRow(rowData);
        }
      document.getElementByID("mainButton").addEventListener("click",afterButtonClicked);
    </script>; 
</body>
</html>

Tutorial recomends split on two code files,

first file is uformcode.gs

function loadUform() {
    const htmlForSidebar = HtmlService.createTemplateFromFile("uform");
    const htmlOutput = htmlForSidebar.evaluate();
    const ui = SpreadsheetApp.getUi();
    ui.showSidebar(htmlOutput); 
}
function createMenu() {
    const ui = SpreadsheetApp.getUi();
    const menu = ui.createMenu("MyScripts"); 
    menu.addItem("FirstSript","loadUform");
    menu.addToUi();
}
function onOpen(){
    createMenu();
}

second file is funcs.gs

function addNewRow(rowData) {
   const currentDate = new Date(); 
   const ss = SpreadsheetApp.getActiveSpreadsheet(); 
   const ws = ss.getSheetByName("Sheet 1"); /// ***here my sheet name*** 
   Logger.log(rowData)
   ws.appendRow([rowData.Cliente,rowData.Proyecto,currentDate]);
}
    /* This one passes this object as input to addNewRow, considering that rowData has two 
    attributes, Cliente and Proyecto, and giving it this two values. 
    This works (I execute it and the row gets into the sheet*/
function anotherFunc(){
    addNewRow({Cliente: "iPhone", Proyecto: 435});
}

Don´t know what happens, but every time we push the button seems like it´s dead. Any help would be appreciated.

CodePudding user response：

Too many typos in the html file : fuction should be function . getElementByID should be getElementById

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
          crossorigin="anonymous">
    <title>My SideBar</title>
</head>
<body>
<div>
    <div class="mb-3">
        <label for="nombre-cliente" class="form-label">Cliente</label>
        <input type="text" class="form-control" id="nombre-cliente">
    </div>
    <div class="mb-3">
        <label for="nombre-proyecto" class="form-label">Proyecto</label>
        <input type="text" class="form-control" id="nombre-proyecto">
    </div>
    <button class="btn btn-primary" id="mainButton">Submit</button>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-
         q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV 2 9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
        integrity="sha384-ChfqqxuZUCnJSK3 MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
<script>
    function afterButtonClicked() {
        var Cliente = document.getElementById("nombre-cliente");
        var Proyecto = document.getElementById("nombre-proyecto");
        var rowData = {Cliente: Cliente.value, Proyecto: Proyecto.value};
        google.script.run.addNewRow(rowData);
    }

    document.getElementById("mainButton").addEventListener("click", afterButtonClicked);
</script>

</body>
</html>