JS-Dateien, die in dasselbe Dokument einbrechen "TypeError: $ (...) ist null"

Ich habe ein Problem mit der Site eines Freundes. Also das Wesentliche ist, sie hat all diese Javascript-Dateien im selben HTML-Dokument, wobei die Hälfte der Dateien herausgenommen wird, können Sie die entsprechenden Anwendungen verwenden, während das Hinzufügen der gesamten Javascript-Dateien Probleme verursacht und die meisten ihrer Anwendungen brechen. Ziemlich viele Dinge fangen an zu arbeiten, sobald ich ihren Change Calculator, Automaten und Würfelrolle herausnehme.

Ich denke, es gibt entweder a) zu viele Javascript-Dateien oder b) einige dieser Dateien sind im Konflikt miteinander.

Ich werde den HTML-Code unten ein ...

Ich konnte die JS einfügen, aber das werde ich nicht, da es so viel ist. Irgendwelche Gedanken wären hilfreich.

Firefox gibt einen Debug-Fehler:

ReferenceError: $ is not defined 
<anonymous> 
main.min.js:1 
main.min.js:1:39412 

ReferenceError: $ is not defined 
<anonymous> 
main.js:7 
main.js:7:1 

TypeError: this.outerNode.getElementsByTagName is not a function 
ProgressBar() 
progressbar_library.js:10 
<anonymous> 
progressbar.js:41 
jsLib.dom.ready() 
jslib_dom_ready.js:18 
jsLib.dom.readyInit/<() 
jslib_dom_ready.js:31 
progressbar_library.js:10:22

HTML:

<!DOCTYPE html> 
<!--Created February 8, 2016--> 
<html lang="en"> 
<head> 
    <meta name="dcterms.rightsHolder" content="Name of Copyright Holder" /> 
    <meta name="dcterms.dateCopyrighted" content="2015" /> 
    <meta name="description" content="A short description of the page" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
    <meta name="keywords" content=/> 
    <meta name="description" content= /> 

    <link href="css/js-page.css" rel="stylesheet" type="text/css" media="all" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

    <script type="text/javascript" src="js/modernizr-1.5.js"></script> 
    <!--makes folders operate--> 
    <script type="text/javascript" src="js/folders/jquery.min.js"></script> 
    <script type="text/javascript" src="js/folders/uilang.js"></script> 
    <script type="text/javascript" src="js/folders/main.min.js"></script> 
    <script type="text/javascript" src="js/folders/main.js"></script> 
    <script type="text/javascript" src="js/folders/mobile.js"></script> 
    <!-- table of powers --> 
    <script type="text/javascript" src="js/powers/table_of_powers.js"></script> 
    <!-- Progress Bar --> 
    <script type="text/javascript" src="js/bar/jslib_dom_ready.js"></script> 
    <script type="text/javascript" src="js/bar/jslib_event.js"></script> 
    <script type="text/javascript" src="js/bar/progressbar_library.js"></script> 
    <script type="text/javascript" src="js/bar/progressbar.js"></script> 
    <!-- 3D Carousel --> 
    <script type="text/javascript" src="js/carousel/jslib_css.js"></script> 
    <script type="text/javascript" src="js/carousel/jslib_event.js"></script> 
    <script type="text/javascript" src="js/carousel/jslib_event_mouse.js"></script> 
    <script type="text/javascript" src="js/carousel/jslib_event_keyboard.js"></script> 
    <script type="text/javascript" src="js/carousel/carousel_library.js"></script> 
    <script type="text/javascript" src="js/carousel/carousel.js"></script> 
    <!-- Change Calculator --> 
    <script type="text/javascript" src="js/calc/calculateChange.js"></script> 
    <!-- Change Calculator --> 
<script type="text/javascript" src="js/calc/calculateChange.js"></script> 
    <!-- vending machine --> 
<script type="text/javascript" src="js/vending/vending_library.js"></script> 
<script type="text/javascript" src="js/vending/vending.js"></script> 
    <!-- dice roller --> 
<script type="text/javascript" src="js/dice/dice_library.js"></script> 
<script type="text/javascript" src="js/dice/dice.js"></script> 
    <!--Date updated, courtesy of Gregory Carroll--> 
<script> 
function makeArray() { 
      for (i = 0; i < makeArray.arguments.length; i++) 
      this[i] = makeArray.arguments[i]; 
     } 

     function getFullYear(d) { 
      var y = d.getYear(); 
      if (y < 1000) { 
      y += 1900 
      }; 
      return y; 
     } 

     var days = new makeArray("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"); 
     var months = new makeArray("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"); 

     function format_time(t) { 
      var Day = t.getDay(); 
      var Date = t.getDate(); 
      var Month = t.getMonth(); 
      var Year = getFullYear(t); 
      timeString = ""; 
      timeString += days[Day]; 
      timeString += ", "; 
      timeString += months[Month]; 
      timeString += " "; 
      timeString += Date; 
      timeString += ", "; 
      timeString += Year; 
      return timeString; 
      } 


     m = new Date(document.lastModified); 
     d = new Date(); 
     $(function() { 
      $('.timestamp').html(format_time(m)) 
     }); 
</script> 

    <!--favicon--> 
    <link rel="shortcut icon" href="assets/ico/js_logo.ico" type="image/x-icon"/> 

    <title>England's Showcase Website: JavaScript</title> 
</head> 

<body> 
    <div id="js"> 
     <header> 
      <img id="logo" src="assets/js.png" alt="JavaScript logo"/>   
     </header> 






     <p></p> 
      <div class="folderOpenClose" onclick="toggleAllFolders();">OPEN/CLOSE ALL FOLDERS</div> 
     <p></p> 
      <div class="folderlabel" onclick="togglefolder(&#39;folder0&#39;);">Table of Powers</div> 
       <div id="folder0" class="folder" data-isfolder="true" style="display: none;"> 
        <!-- Added February 25, 2016 --> 
        <div id="table_powers"> 
         <p id="power-integer">Enter an integer from 1 to 10 in the text box and click the 
         Powers button to see the square and cube of the numbers from one 
         to the value entered.</p> 
         <p id="table"> 
          <input type="text" name="maxbase" id="maxbase" /> 
          <input type="button" value="Powers" name="showpowers" id="showpowers" /> 
         </p> 
         <textarea name="powers" id="powers" rows="12" cols="24"></textarea> 
        </div> 
       </div> 
     <p></p> 
      <div class="folderlabel" onclick="togglefolder(&#39;folder1&#39;);">Progress Bar</div> 
       <div id="folder1" class="folder" data-isfolder="true" style="display: none;"> 
        <!-- Added February 25, 2016 --> 
        <div id="progress_bar"> 
         <div id="progressbar" class="outerbar"> 
          <div id="innerbar">&nbsp;</div> 
         </div> 
         <!--<div class="center">--> 
          <input type="button" value="Go to 100%" id="toggleBar" /> 
         <!--</div>--> 
        </div> 
       </div> 
     <p></p> 
      <div class="folderlabel" onclick="togglefolder(&#39;folder2&#39;);">3D Carousel</div> 
       <div id="folder2" class="folder" data-isfolder="true" style="display: none;"> 
        <!-- Added February 25, 2016 --> 
        <div id="carousel"> 
         <div id="fishing_pics"> 
          <img style="position: absolute; left: 553px; top: 263px; z-index: 7;" src="assets/javascript/casting1.jpg" alt="Casting 1" id="casting1_01" height="159" width="106"/> 
          <img style="position: absolute; left: 346px; top: 333px; z-index: 105;" src="assets/javascript/casting2.jpg" alt="Casting 2" id="casting2_01" height="181" width="271"/> 
          <img style="position: absolute; left: 436px; top: 360px; z-index: 197;" src="assets/javascript/catchrelease.jpg" alt="Catch and Release" id="catch-release_1" height="281" width="375"/> 
          <img style="position: absolute; left: 672px; top: 345px; z-index: 154;" src="assets/javascript/fish.jpg" alt="Fish" id="fish_01" height="245" width="327"/> 
          <img style="position: absolute; left: 727px; top: 306px; z-index: 37;" src="assets/javascript/lures.jpg" alt="Lures" id="lures_01" height="129" width="194"/> 
         </div> 
         <ul id="carousel-list"> 
          <li>Use CTRL-Left and CTRL-Right or move the mouse over the 
          carousel to spin the carousel.</li> 
          <li>Use CTRL-Up and CTRL-Down to tilt the carousel view.</li> 
          <li>Press ESC to pause/resume the carousel.</li> 
         </ul> 
        </div> 
       </div> 
     <p></p> 
      <div class="folderlabel" onclick="togglefolder(&#39;folder3&#39;);">Change Calculator</div> 
       <div id="folder3" class="folder" data-isfolder="true" style="display: none;"> 
        <!-- Added February 24, 2016 --> 
        <div id="coins">    
         <label class="coinLabel">Enter number of cents (0-99):</label> 
         <input type="text" id="cents" class="disabled" /> 
         <input type="button" value="Calculate" name="figure" id="figure" /> 
         <br /> 
         <br /> 
         <br /> 
         <label class="coinLabel">Quarters:</label> 
         <input type="text" id="quarters" class="disabled" disabled="disabled" /> 
         <br /> 
         <label class="coinLabel">Dimes:</label> 
         <input type="text" id="dimes" class="disabled" disabled="disabled" /> 
         <br /> 
         <label class="coinLabel">Nickels:</label> 
         <input type="text" id="nickels" class="disabled" disabled="disabled" /> 
         <br /> 
         <label class="coinLabel">Pennies:</label> 
         <input type="text" id="pennies" class="disabled" disabled="disabled" /> 
        </div> 
       </div> 
     <p></p> 
      <div class="folderlabel" onclick="togglefolder(&#39;folder4&#39;);">Slide Show</div> 
       <div id="folder4" class="folder" data-isfolder="true" style="display: none;"> 
        <!-- Added February 25, 2016 --> 
        <div id="slideshow"> 
         <div id="slide-intructions" > 
          <table class="tableSlides"> 
           <caption>KEYBOARD CONTROLS</caption> 
           <tr> 
            <th>Key</th> 
            <th>Action</th> 
           </tr> 
           <tr> 
            <td>Spacebar</td> 
            <td>Toggle Pause/Play</td> 
           </tr> 
           <tr> 
            <td>Left-arrow</td> 
            <td>Previous Image When Paused</td> 
           </tr> 
           <tr> 
            <td>Right-arrow</td> 
            <td>Next Image When Paused</td> 
           </tr> 
           <tr> 
            <td>Esc</td> 
            <td>Resets Slide Show</td> 
           </tr> 
          </table> 
          <table class="tableSlides" > 
           <caption>MOUSE CONTROLS</caption> 
           <tr> 
            <th>Mouse</th> 
            <th>Action</th> 
           </tr> 
           <tr> 
            <td>Shift+Click</td> 
            <td>Toggle Pause/Play</td> 
           </tr> 
           <tr> 
            <td>Click</td> 
            <td>Next Image When Paused</td> 
           </tr> 
           <tr> 
            <td>Right-click</td> 
            <td>Previous Image When Paused</td> 
           </tr> 
          </table> 
          <p id="note"><b>NOTE:</b> Right click doesn't work in <i>Opera</i>.</p> 
         </div> 
         <div id="pic-slides"> 
          <ul class="center" id="imageList"> 
           <li><a href="assets/javascript/casting1.jpg" title="Casting 1" id="casting1_02">Casting 1</a></li> 
           <li><a href="assets/javascript/casting2.jpg" title="Casting 2" id="casging2_02">Casting 2</a></li> 
           <li><a href="assets/javascript/catchrelease.jpg" title="Catch and Release" id="catch-release_02">Catch and Release</a></li> 
           <li><a href="assets/javascript/fish.jpg" title="Fish" id="fish_02">Fish</a></li> 
           <li><a href="assets/javascript/lures.jpg" title="Lures" id="lures_02">Lures</a></li> 
          </ul> 
          <p class="center"> 
           <button id="btnPrevious" disabled="disabled"> 
            <img src="assets/javascript/prev.gif" alt="Previous Image" /> 
           </button> 
           <button id="btnPlay"> 
            <img src="assets/javascript/pause.gif" alt="Play or Pause" id="imgPlayPause" /> 
           </button> 
           <input type="button" id="btnSpeed" value="Fast" /> 
           <button id="btnNext" disabled="disabled"> 
            <img src="assets/javascript/next.gif" alt="Next Image" /> 
           </button> 
          </p> 
          <p class="center"><span id="caption">Casting 1</span></p> 
          <p class="center"> 
           <img src="assets/javascript/casting1.jpg" alt="Casting 1" id="image" /> 
          </p> 
         </div> 
        </div> 
       </div> 
     <p></p> 
      <div class="folderlabel" onclick="togglefolder(&#39;folder5&#39;);">Vending Machine</div> 
       <div id="folder5" class="folder" data-isfolder="true" style="display: none;"> 
        <!-- Added February 25, 2016 --> 
        <div id="vending-machine"> 
         <div class="vending-machine"> 
          <input type="button" value="Dollar" id="dollar" /> 
          <input type="button" value="Quarter" id="quarter" /> 
          <input type="button" value="Dime" id="dime" /> 
          <input type="button" value="Nickel" id="nickel" /> 
          <input type="button" value="Refund" id="refund" /> 
         </div> 
         <div class="vending-machine"> 
          $ <input type="text" id="deposit" /> 
         </div> 
         <div class="vending-machine"> 
          <input type="button" value="Coke" id="coke" /> 
          <input type="button" value="Pepsi" id="pepsi" /> 
          <input type="button" value="Mountain Dew" id="dew" /> 
          <input type="button" value="Dr. Pepper" id="pepper" /> 
          <input type="button" value="Root Beer" id="rootbeer" /> 
          <input type="button" value="Water" id="water" /> 
         </div> 
         <div class="vending-machine"> 
          <span id="all-products">All products $0.75</span> 
         </div> 
        </div> 
       </div> 
     <p></p> 
      <div class="folderlabel" onclick="togglefolder(&#39;folder6&#39;);">Dice Roller</div> 
       <div id="folder6" class="folder" data-isfolder="true" style="display: none;"> 
        <!-- Added February 24, 2016 --> 
        <div id="roller"> 
         <label id="die1">Die 1:</label> 
         <input class="die" name="die1_results" id="die1_results" type="text"/> 
         <br/> 
         <br/> 
         <label id="die2">Die 2:</label> 
         <input class="die" name="die2_results" id="die2_results" type="text"/> 
         <br/> 
         <br/> 
         <label id="message">Message:</label> 
         <input id="dice-message" name="roll_button" type="text"/> 
         <br/> 
         <br/> 
         <input type="button" id="roll_button" value="Roll the Dice" /> 
        </div> 
       </div> 
     <p></p> 
     <p></p> 
      <div class="folderlabel" onclick="togglefolder(&#39;folder7&#39;);">Area &amp; Perimeter Calculator</div> 
       <div id="folder7" class="folder" data-isfolder="true" style="display: none;"> 
        <!-- Added February 24, 2016 --> 
        <div id="area_perimeter"> 
         <label class="calculator" for="length">Length:</label> 
         <input class="lenth" type="text" id="length" /> 
         <br /> 
         <label class="calculator" for="width">Width:</label> 
         <input class="lenth" type="text" id="width" /> 
         <br /> 
         <label class="calculator" for="area">Area:</label> 
         <input class="lenth" type="text" id="area" disabled="disabled" /> 
         <br /> 
         <label class="calculator" for="perimeter">Perimeter:</label> 
         <input class="lenth" type="text" id="perimeter" disabled="disabled" /> 
         <br />  
         <br />  
         <input type="button" id="calculate" value="calculate" /> 
         <br /> 
        </div> 
       </div> 
     <br/> 

     <footer> 
      <div class="timestamp-wrap"> 
       <p id="copyright"> 
        Copyright &#169; 
       <!-- function for year change --> 
        <script type="text/javascript"> 
         now=new Date(); 
         year=now.getFullYear(); 
        </script> 
        <script type="text/javascript"> 
         document.write(year); 
        </script> 
        | All Rights Reserved 
        <br/> 
         UPDATED: <span class="timestamp"></span> 
       </p> 
      </div> 

       Back to <a href="historyIndex.html" title="Return to History and Presnetation Homepage" target="_blank"><i>History &amp; Presentation</i> Homepage</a> 
       <br/> 
       Back to <a href="index.html" title="Return Home" target="_blank">Main Page</a> 
     </footer> 
    </div> 
</body> 
</html>

Quelle

2016-03-20 Robert Souza

Zu viele jQueries: 1: '' 2: 'Skripttyp =" text/javascript "src =" js/folders/jquery.min.js ">' – mplungjan

Für sicher entfernen Sie die zweite jQuery – mplungjan

müssen wir main.min.js sehen. Es heißt, Sie haben eine Null-Variable in den Zeilen 1 und 7. Entminieren Sie Ihren Code, führen Sie einen korrekten Stack-Trace aus oder rufen Sie ihn an. – user2330270

Es scheint bereits zwei Versionen von Jquery geladen zu sein, die Konflikte verursachen könnten. Verschiedene Bibliotheken können auch die $ Variable verwenden. Wenn dies der Fall ist, um Konflikte zu vermeiden, versuchen jQuery in noConflict-Modus, bevor Sie die jQuery $ Variable, etwa so:

<script src="other_lib.js"></script> 
<script src="jquery.js"></script> 
<script> 
$.noConflict(); 
jQuery(document).ready(function($) { 
    // Code that uses jQuery's $ can follow here. 
}); 
// Code that uses other library's $ can follow here. 
</script>

Quelle

2016-03-20 14:30:29

JS-Dateien, die in dasselbe Dokument einbrechen "TypeError: $ (...) ist null"

Antwort

Verwandte Themen