title: Javascript function working on one page but not when included on main page
body: <p>I'm relatively new to using javascript and having an issue when using it alongside php.</p>
  
  <p>I am creating a budgeting calculator that allows users to select items(e.g cinema ticket) from a menu. I have created a database with a list of common goods and their associated price and am using php to pass this this information into my website. </p>
  
  <p>I found a javascript function online that subtotals a user's total expediture as they select more items. So as a user selects a checkbox beside an item,the subtotal is autmoatically updated at the bottom of the page.</p>
  
  <p>To ensure security, I am running the php query which prints out the information on a seperate page and using the include() function to include it on the main page.</p>
  
  <p>The issue I am having is that when I run the page which only has the php code on it and include the javscript function on this page it works correctly, however, it won't work when it is included on the main page. </p>
  
  <p>Here is a demo of the version of the subtotal form I am using - <a href="https://www.dyn-web.com/tutorials/forms/checkbox/group.php" rel="nofollow noreferrer">https://www.dyn-web.com/tutorials/forms/checkbox/group.php</a></p>
  
  <p>//html</p>
  
  <pre><code>&lt;html&gt;
     &lt;!-- submenu for transport--&gt;
  &lt;button class="collapsible"&gt;Transport&lt;/button&gt;
    &lt;div class="content" &gt;
      &lt;!-- further submenu for public transport --&gt;
              &lt;button class="collapsible" &gt; Public Transport&lt;/button&gt;
       &lt;div class="content"&gt;
          &lt;table class="auto-style2" style="width: 96%"&gt;
          &lt;tbody class="auto-style2"&gt;     
           &lt;tr&gt;
                 &lt;td style="width: 353px; height: 26px;"&gt;&amp;nbsp;&lt;/td&gt;
             &lt;td style="height: 26px"&gt;
             &lt;div class ='row1'&gt;€&lt;/div&gt;&lt;/td&gt;
           &lt;/tr&gt;
              &lt;?php
                 include('publictransport.php');
               ?&gt; 
  
          &lt;/tbody&gt;        
          &lt;/table&gt;
      &lt;/div&gt;  
  &lt;/html&gt;    
  </code></pre>
  
  <p>//php</p>
  
  <pre><code>&lt;?php
  //This is publictransport.php
  //establish connection
  include('detail.php');
  ##query information
  $q  = 'SELECT name,price FROM expenditure WHERE sub_category = "public_transport"';
  $result = $db-&gt;query($q);
  $num_results = mysqli_num_rows($result);
  echo "&lt;form action='' method='post' class='demoForm' id='demoForm'&gt;&lt;div id = 'transport'&gt;";
  while($row = mysqli_fetch_row($result))
  {
      //loop and print out information in html format
      echo "&lt;tr&gt;";
      echo "&lt;td class = 'firstcolumn'&gt;", $row[0] ,"&lt;/td&gt;";  
      echo "&lt;td class = 'row1'&gt;",  $row[1],"&lt;/td&gt;";
      echo "&lt;td class ='row1'&gt; &lt;div id='ck-button'&gt; &lt;label&gt; &lt;input type='checkbox'";
      echo "value = '". $row[1]."'&gt;&lt;span&gt; + &lt;/span&gt;&lt;/label&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;";
  }
  
  echo "&lt;/div&gt;&lt;p&gt;&lt;label&gt;Total: $ &lt;input type='text' name='total' class='num' size='6' value='0' readonly='readonly'/&gt;&lt;/label&gt;&lt;/p&gt;";
  echo "&lt;/form&gt;";
  ?&gt;
  </code></pre>
  
  <p>//javascript </p>
  
  <pre><code>&lt;script&gt;
  // call onload or in script segment below form
  function attachCheckboxHandlers() {
  // get reference to element containing transport checkboxes
  var el = document.getElementById('transport');
  // get reference to input elements in transport container element
  var types = el.getElementsByTagName('input');
  
  // assign updateTotal function to onclick property of each checkbox
  for (var i=0, len=types.length; i&lt;len; i++) {
      if ( types[i].type === 'checkbox' ) {
          types[i].onclick = updateTotal;
      }
   }
  
  }
  
  // called onclick of transport checkboxes
  
  function updateTotal(e) {
  
  // 'this' is reference to checkbox clicked on
  
  var form = this.form;
  
  // get current value in total text box, using parseFloat since it is a 
  string
  
  var val = parseFloat( form.elements['total'].value );
  
  // if check box is checked, add its value to val, otherwise subtract it
  
  if ( this.checked ) {
      val += parseFloat(this.value);
  } else {
      val -= parseFloat(this.value);
  }
  
  // format val with correct number of decimal places
  // and use it to update value of total text box
  
  form.elements['total'].value = formatDecimal(val);
  }
  
  // format val to n number of decimal places
  // modified version of Danny Goodman's (JS Bible)
  
  function formatDecimal(val, n) {
  n = n || 2;
  var str = "" + Math.round ( parseFloat(val) * Math.pow(10, n) );
  while (str.length &lt;= n) {
      str = "0" + str;
  }
  var pt = str.length - n;
  return str.slice(0,pt) + "." + str.slice(pt);
  }
  
  // in script segment below form
  
  attachCheckboxHandlers();
  
  &lt;/script&gt;
  </code></pre>
  
  <p>The issue is that on the main page, the javascript does not locate the checkboxes. The value 'types' which is an array of the checkboxes should be of length 4. On the publictransport.php page it has a length of 4 whereas on the main page it returns an empty array.</p>
  
  <p>Any help would be really appreciated and as I am new to javascript I may not have explained the issue in the best way!</p>