Javascript 未捕获引用错误：（函数）未在HtmlButtoneElement.onclick上定义_Javascript_Html_Referenceerror

Javascript 未捕获引用错误：（函数）未在HtmlButtoneElement.onclick上定义

javascript html

Javascript 未捕获引用错误：（函数）未在HtmlButtoneElement.onclick上定义,javascript,html,referenceerror,Javascript,Html,Referenceerror,以下功能，onclourchange和onWindowChange，应该在单击按钮时循环浏览图像。相反，我得到了两个：未捕获引用错误：未定义onColourChange 在HTMLButtonElement.onclick 及未捕获引用错误：未定义onWindowChange 在HTMLButtonElement.onclick HTML: <head> <title>TravelSmart</title> <link rel

以下功能，

onclourchange

和

onWindowChange

，应该在单击按钮时循环浏览图像。相反，我得到了两个：

未捕获引用错误：未定义onColourChange 在HTMLButtonElement.onclick

及

未捕获引用错误：未定义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)">&laquo;</button>
            <button class="right-button" onclick="onColourChange(+1)">&raquo;</button>
        </div>

        <div class="windows">
        <img id="windows-image" src="../IMAGES/x"/>
        <button class="left-button" onclick="onWindowChange(+1)">&laquo;</button>
        <button class="right-button" onclick="onWindowChange(+1)">&raquo;</button>
        </div>
    </div>

    <input id="selector-box" type="text" value="h: 0 | t: 0" readonly />

</main>


</div>
</body>

//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()
}


旅行智能








&拉阔；
&拉阔；
&拉阔；
&拉阔；

JavaScript:

    <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)">&laquo;</button>
            <button class="right-button" onclick="onColourChange(+1)">&raquo;</button>
        </div>

        <div class="windows">
        <img id="windows-image" src="../IMAGES/x"/>
        <button class="left-button" onclick="onWindowChange(+1)">&laquo;</button>
        <button class="right-button" onclick="onWindowChange(+1)">&raquo;</button>
        </div>
    </div>

    <input id="selector-box" type="text" value="h: 0 | t: 0" readonly />

</main>


</div>
</body>

//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()
}

//汽车彩色图像
彩色图像=
[
“./IMAGES/windowsred.jpg”
“./IMAGES/bmwblue.jpg”
“./IMAGES/bmwgreen.jpg”
];
//车窗图像
var窗口图像=
[
“./IMAGES/bmwindowred”
“./IMAGESbmwwindowblue”
“./IMAGES/bmwwindowgreen”
];
//成分指数
var指数，windowIndex；
//默认为0
colorIndex=windowIndex=0；
//电流分量
var彩色图像，windowImage；
//页面加载调用：
window.onload=函数（）
{
//每个组件的元素
colorImage=document.getElementById（“彩色图像”）；
windowImage=document.getElementById（“windows图像”）；
//起首字母
onCarChanged（）；
}
//使用当前Selecton更新了选择器框
函数updateSelectorBox（）
{
//获取要更改的元素
var-selectorBox=document.getElementById（“选择器框”）；
//将该值设置为0
selectorBox.value=“”；
//将每个索引附加到字符串
选择orbox.value+=（“颜色：“+colorIndex+”）；
选择orbox.value+=（“颜色：”+windowIndex）；
}
//颜色改变时呼叫
颜色变化（偏移）功能
{
//查找与当前标题索引偏移给定偏移量的索引。
var offsetIndex=（颜色指数+偏移量）；
//如果为负数，则将索引设置为最后一幅图像
如果（偏移指数<0）
colorIndex=colorImages.length+偏移量；
//否则，按长度添加偏移和模以环绕值。
其他的
colorIndex=（colorIndex+偏移量）%colorImages.length；
//身体变化时回电话
onCarChanged（）；
}
//更改窗口时调用
函数onWindowChange（偏移量）
{
//查找与当前标题索引偏移给定偏移量的索引。
var offsetIndex=（窗口索引+偏移量）；
//如果为负数，则将索引设置为最后一幅图像
如果（偏移指数<0）
windowIndex=windowImages.length+偏移量；
//否则，按长度添加偏移和模以环绕值。
其他的
windowIndex=（windowIndex+偏移量）%windowImages.length；
//身体变化时回电话
onCarChanged（）；
}
//当汽车以某种方式更换时打电话
函数onCarChanged（）
{
updateSelectorBox（）；
//设置颜色和窗口图像
windowImage.src=windowImages[windowIndex]；
colorImage.src=colorImages[colorIndex]；
}
//保存到本地存储
函数saveSelection（）
{
localStorage.setItem（“ChosenColor”，colorIndex）；
setItem（“chosenWindows”，windowIndex）；
}
函数loadSelection（）
{
colorIndex=localStorage.getItem（“ChosenColor”）；
windowIndex=localStorage.getItem（“chosenWindows”）；
onCarChanged（）
}

只需移动该行：

 <script type="text/javascript" language="javascript" src="../JS/bmwcustom.js"></script>

就在您的

标签前面

首先加载HTML元素，然后加载Javascript，它应该可以工作。

脚本中有语法错误，因此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"
];

到

请向我们展示整个

bmwcustom.js

fileUpdated now@bergive已经尝试过了，但我仍然得到了同样的错误：我一直被告知，最好的做法是最后加载任何脚本，当然规则总是有例外，但它们通常是有原因的