title: Using the same JavaScript on a different page, why am I getting an error?
body: <p>I am using the same JavaScript that works flawlessly in one page in a second page, but I am getting an error in the second page. I didn't write the JavaScript and can't change it, so please help me figure out what is causing the error.</p>
  
  <p>I tried moving the line of code that calls the JavaScript around, but that doesn't help. I checked the first page against the second page, but don't see anything that would make it stop working.</p>
  
  <p>Calling the JavaScript here:</p>
  
  <pre><code>&lt;script type="text/javascript" src="&lt;?php echo base_url(); ?&gt;js/rating.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>The JavaScript code is:</p>
  
  <pre><code>!function(){
      "use strict";
      function t(t,i,n,e){
          function r(t,i){ 
              for(var n=0;n&lt;t.length;n++){
                  var e=t[n];i(e,n)
              }
          }
          function a(t){
             s(t),o(t),u(t)
          }
          function s(t){
             t.addEventListener("mouseover",function(i){
                 r(f,function(i,n){
                     n&lt;=parseInt(t.getAttribute("data-index"))?i.classList.add("is-active"):i.classList.remove("is-active")
                 })
             })
          }
          function o(t){
             t.addEventListener("mouseout",function(t){
               -1===f.indexOf(t.relatedTarget)&amp;&amp;c(null,!1)
             })
          }
          function u(t){
              t.addEventListener("click",function(i){
                 i.preventDefault(),c(parseInt(t.getAttribute("data-index"))+1,!0)
              })
          }
          function c(t,a){
              t&amp;&amp;0&gt;t||t&gt;n||(void 0===a&amp;&amp;(a=!0),i=t||i,r(f,function(t,n){
                  i&gt;n?t.classList.add("is-active"):t.classList.remove("is-active")
              }),e&amp;&amp;a&amp;&amp;e(d()))
          }
          function d(){
              return i
          }
          var f=[];
          return function(){
              if(!t)throw Error("No element supplied.");
              if(!n)throw Error("No max rating supplied.");
              if(i||(i=0),0&gt;i||i&gt;n)throw Error("Current rating is out of bounds.");
              for(var e=0;n&gt;e;e++){
                  var r=document.createElement("li");
                  r.classList.add("c-rating__item"),r.setAttribute("data-index",e),i&gt;e&amp;&amp;r.classList.add("is-active"),t.appendChild(r),f.push(r),a(r)
              }
          }(),{
             setRating:c,getRating:d
          }
       }
       window.rating=t}();
  </code></pre>
  
  <p>The error I am getting is: <code>'Uncaught TypeError: t.appendChild is not a function.</code></p>
  
  <p>The code in the page:</p>
  
  <pre><code>echo 'Please rate the quality of this transcript:&lt;br/&gt;';
  echo '&lt;div style="height: 44px; padding: 5px;text-align: center;"&gt;';
  echo '&lt;span id="qualitystars" style="vertical-align: sub;"&gt;&lt;li class="c-rating__item" data-index="0"&gt;&lt;/li&gt;&lt;li class="c-rating__item" data-index="1"&gt;&lt;/li&gt;&lt;li class="c-rating__item" data-index="2"&gt;&lt;/li&gt;&lt;li class="c-rating__item" data-index="3"&gt;&lt;/li&gt;&lt;li class="c-rating__item" data-index="4"&gt;&lt;/li&gt; &lt;/span&gt;';
  echo '&lt;/div&gt;&lt;input type="hidden" name="quality" id="quality"&gt;';
  </code></pre>
  
  <p>The original page didn't have the <code>&lt;li&gt;</code> hard coded, but for some reason I have to put those in or they don't show. Maybe that's somehow related to the error I'm getting? </p>
  
  <p>What should appear is 5 outlines of stars and when a user hovers their mouse above a star, that star and those leading up to it from the left should be solid. The user can then click on a star to submit the rating.  Right now I see the outlines, but when I hover, only the star that I'm hovering over is solid.</p>
  
  <p>Thanks in advance for any help.</p>
  
  <p><strong>EDIT:</strong> Here is where I call the rating:</p>
  
  <pre><code>let q_curr = 1;
  let q_el = $('qualitystars');
  let q_cb_rating = function (rating) {
      $('quality').value = rating;
  };
  let q_rating = rating(q_el, q_curr, 5, q_cb_rating);
  </code></pre>
  
  <p>It is calling the JavaScript file, which is rating.min.js.</p>