我和朋友的网站有问题。所以要点是，她将所有这些Javascript文件放在同一个HTML文档中，取出一半的文件可以让你使用相应的应用程序，同时添加整个Javascript文件导致问题，并且她的大多数应用程序都会中断。一旦我拿出她的变化计算器，自动售货机和骰子滚轮，很多东西就开始工作了。
我认为有a）javascript文件过多或b）其中一些文件彼此冲突。
我将粘贴HTML代码...
我可以粘贴JS，但我不会因为有这么多。任何想法都会有所帮助。
Firefox出现调试错误：
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('folder0');">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('folder1');">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"> </div>
</div>
<!--<div class="center">-->
<input type="button" value="Go to 100%" id="toggleBar" />
<!--</div>-->
</div>
</div>
<p></p>
<div class="folderlabel" onclick="togglefolder('folder2');">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('folder3');">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('folder4');">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('folder5');">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('folder6');">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('folder7');">Area & 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 ©
<!-- 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 & Presentation</i> Homepage</a>
<br/>
Back to <a href="index.html" title="Return Home" target="_blank">Main Page</a>
</footer>
</div>
</body>
</html>
答案 0 :(得分：0)
似乎已经加载了两个版本的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>