在同一文檔中出現的JS文件「TypeError：$（...）爲空」

我遇到與朋友的網站有關的問題。因此，要點是，她將所有這些Javascript文件放在同一個HTML文檔中，將一半的文件取出讓您使用相應的應用程序，同時添加整個Javascript文件導致問題和大部分應用程序中斷。一旦我拿出更改計算器，自動販賣機和骰子滾筒，很多事情就開始奏效。

我在想，有一個）太多的javascript文件或b）這些文件中的一些彼此衝突。

我將粘貼的HTML代碼...

我可以粘貼JS，但我不會因爲有這麼多。任何想法都會有幫助。

火狐提供了一個調試錯誤：

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>

來源

2016-03-20 Robert Souza

太多jQueries：1：''2：'script type =」text/javascript「src =」js/folders/jquery.min.js「>' – mplungjan

For確定刪除第二個jQuery – mplungjan

我們需要看到main.min.js.這是說你有第1和第7行的空變量。取消縮小你的代碼，運行並得到一個適當的堆棧跟蹤或沒有人可以幫助 – user2330270

有似乎已經是2個版本的jQuery加載，這可能會導致衝突。另外，不同的庫可能會使用$變量。如果是這種情況，爲了避免衝突，請嘗試使用jQuery的$變量，像這樣使用前jQuery in noConflict模式：

<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>

來源

2016-03-20 14:30:29

在同一文檔中出現的JS文件「TypeError：$（...）爲空」

回答

相關問題