title: How to initialize a function within an HTML file in a JavaScript file? (Chrome Apps)
body: <p>I am working with a Scoring Board Chrome App. (I am new to Chrome Apps)</p>
  
  <p><strong>index.html</strong> - (just a part of the code) where user inputs the number of players for the scoring board, submits and opens another html file where a table and a number of rows are displayed based on the user input.</p>
  
  <pre><code>&lt;form class="pure-form"&gt;
    &lt;fieldset&gt;
      &lt;legend&gt;Enter number of Players:&lt;/legend&gt;
  
      &lt;input type="text" id="users" placeholder="Input Number"&gt;
      &lt;button type="submit" id="btn1" class="pure-button pure-button-primary"&gt;Submit&lt;/button&gt;
    &lt;/fieldset&gt;
  &lt;/form&gt;
  
  &lt;script&gt;
    function(){
      //localStorage.setItem('value', document.getElementById("users").value);
      localStorage.value = document.getElementById("users").value;
    }
  &lt;/script&gt;
  &lt;script type="text/javascript" src="js/main-sheet.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/alert.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>main-sheet.html</strong> - (also just a part of the code)</p>
  
  <pre><code>&lt;table class="pure-table"&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;#&lt;/th&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Score&lt;/th&gt;
          &lt;th&gt;Baluts&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;script type="text/javascript"&gt;
  
    function addMoreRows(){
      //var val = localStorage.getItem('value');
      var val = localStorage.value;
  
      document.getElementById("value").value = val;
  
      for(var x=0; x&lt;val; x++) {
          var newRow = document.getElementById('pure-table').insertRow();
  
          var newCell = newRow.insertCell();
          newCell.innerHTML="&lt;tr&gt;&lt;td&gt;&lt;input type='text' name='code'&gt;&lt;/td&gt;&lt;/tr&gt;";
  
          newCell = newRow.insertCell();
          newCell.innerHTML="&lt;tr&gt;&lt;td&gt;&lt;input type='text' name='name'&gt;&lt;/td&gt;&lt;/tr&gt;";
  
          newCell = newRow.insertCell();
          newCell.innerHTML="&lt;tr&gt;&lt;td&gt;&lt;input type='text' name='score'&gt;&lt;/td&gt;&lt;/tr&gt;";
  
          newCell = newRow.insertCell();
          newCell.innerHTML="&lt;tr&gt;&lt;td&gt;&lt;input type='text' name='baluts'&gt;&lt;/td&gt;&lt;/tr&gt;";
  
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>The table head is displayed but rows aren't. Though I see why because function addMoreRows() hasn't really been called, and I don't know how.</p>
  
  <p>And here is for the <strong>main-sheet.js</strong></p>
  
  <pre><code>document.getElementById("btn1").addEventListener("click", function() {
      if (!document.getElementById('users').value.trim()) {
          //alert("Please enter the remarks");
          chrome.app.window.create('../alert.html',{
            'bounds': {
              'width': 200,
              'height': 200
            },
            'resizable': false,
          });
      }
      else{
      chrome.app.window.create('../main-sheet.html', {
      'bounds': {
        'width': 1000,
        'height': 1000
      },
      'resizable': false,
    });
  }});
  </code></pre>
  
  <p>How do I call the function addMoreRows() to add Rows??
  I would appreciate the help and corrections. Thank you.</p>