How to initialize a function within an HTML file in a JavaScript file? (Chrome Apps) -

i working scoring board chrome app. (i new chrome apps)

index.html - (just part of code) user inputs number of players scoring board, submits , opens html file table , number of rows displayed based on user input.

<form class="pure-form">   <fieldset>     <legend>enter number of players:</legend>      <input type="text" id="users" placeholder="input number">     <button type="submit" id="btn1" class="pure-button pure-button-primary">submit</button>   </fieldset> </form>  <script>   function(){     //localstorage.setitem('value', document.getelementbyid("users").value);     localstorage.value = document.getelementbyid("users").value;   } </script> <script type="text/javascript" src="js/main-sheet.js"></script> <script type="text/javascript" src="js/alert.js"></script> 

main-sheet.html - (also part of code)

<table class="pure-table"> <thead>     <tr>         <th>#</th>         <th>name</th>         <th>score</th>         <th>baluts</th>     </tr> </thead> <tbody>   <script type="text/javascript">    function addmorerows(){     //var val = localstorage.getitem('value');     var val = localstorage.value;      document.getelementbyid("value").value = val;      for(var x=0; x<val; x++) {         var newrow = document.getelementbyid('pure-table').insertrow();          var newcell = newrow.insertcell();         newcell.innerhtml="<tr><td><input type='text' name='code'></td></tr>";          newcell = newrow.insertcell();         newcell.innerhtml="<tr><td><input type='text' name='name'></td></tr>";          newcell = newrow.insertcell();         newcell.innerhtml="<tr><td><input type='text' name='score'></td></tr>";          newcell = newrow.insertcell();         newcell.innerhtml="<tr><td><input type='text' name='baluts'></td></tr>";      } } </script> 

the table head displayed rows aren't. though see why because function addmorerows() hasn't been called, , don't know how.

and here main-sheet.js

document.getelementbyid("btn1").addeventlistener("click", function() {     if (!document.getelementbyid('users').value.trim()) {         //alert("please enter 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,   }); }}); 

how call function addmorerows() add rows?? appreciate , corrections. thank you.

inline javascript not executed. restriction bans both inline blocks , inline event handlers. have include script file containing javascript in page

<script src="script.js" type="text/javascript"></script"> 

instead of using javascript code (addmorerows()) inline js within page.

you find more info on chrome content-security-policy.

hope helps.