title: Javascript in html multiple functions
body: <p>I'm coding a google apps script website/project at the moment and I'm facing a problem in my HTML file which calls javascript functions.</p>
  
  <p>I had one function, which uses DOM manipulation to change a divs content when I click different buttons.</p>
  
  <p>However if I want to add another function (which doesn't even has to do something with my first function) in my <code>&lt;script&gt;</code> element and I run the application, the first function doesn't work at all and nothing happens when I click a button.</p>
  
  <pre><code>&lt;?!= include('CSS'); ?&gt;
  &lt;body&gt;
  &lt;div id="header"&gt;
  &lt;h1&gt;Auction System Software Engineering1&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div id="nav"&gt;  
  &lt;button class="myButton" id="registration"  
  onclick="changeCenter('regForm')"&gt; Registration &lt;/button&gt;&lt;br&gt;
  &lt;button class="myButton" id="searchItem"  
  onclick="changeCenter('search')"&gt; Search Items &lt;/button&gt;&lt;br&gt;
  &lt;div id="logIn"&gt; &lt;?var url = getScriptUrl();?&gt;
  &lt;form id="loginform" action='&lt;?=url?&gt;?page=LoggedIn' target='_top'&gt;
  username: &lt;input type="text" name="username"/&gt;&lt;br&gt;
  password:
   &lt;input type="password" name="password"/&gt;
   &lt;input type="submit" id="loginBtn" value="Login"/&gt;
  &lt;/form&gt; 
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="section"&gt;
  &lt;div id="regForm" style="display:none"&gt;
  &lt;form id="myForm"&gt;
   &lt;fieldset&gt;
   First name:  &lt;input name="prename" type="text" /&gt; &lt;br&gt;
   Second name: &lt;input name="surname" type="text" /&gt; &lt;br&gt;
   birthday: &lt;input name="bday" type="text" /&gt; &lt;br&gt;
   adress: &lt;input name="adress" type="text" /&gt; &lt;br&gt;
   username: &lt;input name="unameReg" type="text" /&gt; &lt;br&gt;
   password: &lt;input name="pwReg" type="password" /&gt; &lt;br&gt;
   repeat password: &lt;input name="pwReg2" type="password" /&gt; &lt;br&gt;
    &lt;input type="button" value="Submit" /&gt;
   &lt;/fieldset&gt;
   &lt;/form&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>this is the HTML layout </p>
  
  <pre><code>&lt;script&gt; 
  // this is the function to change html parts dynamically, like f.e. when 
  clicking a registration button, the welcome center section dissapears 
  and the registration form will be activated
  
  function changeCenter(divID){
  //Hide the currently shown element first
  if(document.getElementById("Welcome").style.display == 'block'){
  document.getElementById("Welcome").style.display = 'none';
  }
  else if (document.getElementById("search").style.display == 'block'){
  document.getElementById("search").style.display = 'none';
  }
  else if (document.getElementById("regForm").style.display == 'block'){
  document.getElementById("regForm").style.display = 'none';
  }
  //display the element that will be shown.  No content is injected yet
  document.getElementById(divID).style.display = 'block';
  }
  
  function testingXY{
  
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>if I delete function testingXY it will work and I can change the center again but when it's added it won't work. Hope this code help you out now. </p>
  
  <pre><code> return HtmlService.createTemplateFromFile('Main').evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
  </code></pre>
  
  <p>that's my .gs code line which will be executed after the apps script app is opened (trough doGet(e) method)</p>