未捕获的 ReferenceError：（函数）未在 HTMLButtonElement.onclick 中定义
Posted
技术标签:
【中文标题】未捕获的 ReferenceError：（函数）未在 HTMLButtonElement.onclick 中定义【英文标题】：Uncaught ReferenceError: (function) not defined at HTMLButtonElement.onclick 【发布时间】：2017-05-22 21:31:30 【问题描述】：以下函数onColourChange 和onWindowChange 应在按钮单击时循环显示图像。相反，我得到了两个：
未捕获的 ReferenceError：未定义 onColourChange 在 htmlButtonElement.onclick
和
未捕获的 ReferenceError：未定义 onWindowChange 在 HTMLButtonElement.onclick
HTML：
<head>
<title>TravelSmart</title>
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../IMAGES/TravelSmart.ico">
<script type="text/javascript" language="javascript" src="../JS/bmwcustom.js"></script>
</head>
<body>
<div id=wrapper>
<header>
<img class="logo" src="../IMAGES/TravelSmart.png">
</header>
<nav>
<ul class="navbar">
<li><a class="active" href="../HTML/index.htm">Home</a></li>
<li><a href="../HTML/News.html">News</a></li>
<li><a href="../HTML/Products.html">Products</a></li>
<li><a href="../HTML/OpeningHours.html">Opening Hours</a></li>
<li><a href="../HTML/Location.html">Location</a></li>
<li><a href="../HTML/Offers.html">Offers</a></li>
</ul>
</nav>
<main>
<div class="customcontainer">
<div class="colour">
<img id="colour-image" src="../IMAGES/o"/>
<button class="left-button" onclick="onColourChange(+1)">«</button>
<button class="right-button" onclick="onColourChange(+1)">»</button>
</div>
<div class="windows">
<img id="windows-image" src="../IMAGES/x"/>
<button class="left-button" onclick="onWindowChange(+1)">«</button>
<button class="right-button" onclick="onWindowChange(+1)">»</button>
</div>
</div>
<input id="selector-box" type="text" value="h: 0 | t: 0" readonly />
</main>
</div>
</body>
JavaScript：
//Car Colour Image
var colourImages =
[
"../IMAGES/windowsred.jpg"
"../IMAGES/bmwblue.jpg"
"../IMAGES/bmwgreen.jpg"
];
//Car Window Image
var windowImages =
[
"../IMAGES/bmwwindowred"
"../IMAGESbmwwindowblue"
"../IMAGES/bmwwindowgreen"
];
//Component Index
var colourIndex, windowIndex;
//Default to 0
colourIndex = windowIndex = 0;
//Current Component
var colourImage, windowImage;
//On page load call:
window.onload = function()
//Element for each component
colourImage = document.getElementById("colour-image");
windowImage = document.getElementById("windows-image");
//Set initial
onCarChanged();
//Updated Selector Box with Current Selecton
function updateSelectorBox()
//Get the element to be changed
var selectorBox = document.getElementById("selector-box");
//Set the value to 0
selectorBox.value = "";
//Append each index to string
selectorBox.value += ("Colour: " + colourIndex + " | ");
selectorBox.value += ("Colour: " + windowIndex);
//Call when colour is changed
function onColourChange(offset)
//Find the index which is offset from the current head index by the given offset.
var offsetIndex = (colourIndex + offset);
//If negative set index to last image
if(offsetIndex < 0)
colourIndex = colourImages.length + offset;
//Otherwise add offset and modulo by the length to wrap around the values.
else
colourIndex = (colourIndex + offset) % colourImages.length;
//Call back when body changes
onCarChanged();
//Call when windows are changed
function onWindowChange(offset)
//Find the index which is offset from the current head index by the given offset.
var offsetIndex = (windowIndex + offset);
//If negative set index to last image
if(offsetIndex < 0)
windowIndex = windowImages.length + offset;
//Otherwise add offset and modulo by the length to wrap around the values.
else
windowIndex = (windowIndex + offset) % windowImages.length;
//Call back when body changes
onCarChanged();
//Call when car is changed in some way
function onCarChanged()
updateSelectorBox();
//Set colour and windows images
windowImage.src = windowImages[windowIndex];
colourImage.src = colourImages[colourIndex];
//Save to local storage
function saveSelection()
localStorage.setItem("chosenColour" , colourIndex);
localStorage.setItem("chosenWindows" , windowIndex);
function loadSelection()
colourIndex = localStorage.getItem("chosenColour");
windowIndex = localStorage.getItem("chosenWindows");
onCarChanged()
【问题讨论】：
请给我们看整个bmwcustom.js文件
现在更新@Bergi
【参考方案1】：
您的脚本中有语法错误，因此 js 失败。
您必须用逗号分隔数组值，即更改
//Car Colour Image
var colourImages =
[
"../IMAGES/windowsred.jpg"
"../IMAGES/bmwblue.jpg"
"../IMAGES/bmwgreen.jpg"
];
//Car Window Image
var windowImages =
[
"../IMAGES/bmwwindowred"
"../IMAGESbmwwindowblue"
"../IMAGES/bmwwindowgreen"
];
到
//Car Colour Image
var colourImages =
[
"../IMAGES/windowsred.jpg",
"../IMAGES/bmwblue.jpg",
"../IMAGES/bmwgreen.jpg"
];
//Car Window Image
var windowImages =
[
"../IMAGES/bmwwindowred",
"../IMAGESbmwwindowblue",
"../IMAGES/bmwwindowgreen"
];
【讨论】：
【参考方案2】：只需移动线：
<script type="text/javascript" language="javascript" src="../JS/bmwcustom.js"></script>
就在您的 </body> 标签之前。
首先加载您的 HTML 元素，然后加载 Javascript，它应该可以工作。
【讨论】：
我试过了，但我仍然得到同样的错误：S 我一直被告知最好是最后加载任何脚本，当然规则总是有例外，但它们通常是有原因的以上是关于未捕获的 ReferenceError：（函数）未在 HTMLButtonElement.onclick 中定义的主要内容，如果未能解决你的问题，请参考以下文章
未捕获的 ReferenceError：（函数）未在 HTMLButtonElement.onclick 中定义
未捕获的ReferenceError：未定义iframeLoad
未捕获的 ReferenceError：未定义验证（jQuery 验证）