Erreur de référence non capturée : (fonction) non définie sur HTMLButtonElement.onclick

Question

Les fonctions suivantes, onColourChange et onWindowChange, devraient faire défiler les images lors du clic sur un bouton. Au lieu de cela, j'obtiens les erreurs suivantes :

Uncaught ReferenceError: onColourChange is not defined at HTMLButtonElement.onclick

et

Uncaught ReferenceError: onWindowChange is not defined at HTMLButtonElement.onclick

HTML :

    TravelSmart

            Accueil
            Actualités
            Produits
            Heures d'ouverture
            Emplacement
            Offres

            «
            »

        «
        »

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

Answer 1

Vous avez une erreur de syntaxe dans votre script et donc le js échoue.

Vous devez séparer les valeurs des tableaux avec des virgules, c'est-à-dire changer

//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"
];

Answer 2

Déplacez simplement la ligne:

juste avant votre balise .

Chargez d'abord vos éléments HTML, puis Javascript et cela devrait fonctionner.