Uncaught ReferenceError: (function) not defined at HTMLButtonElement.onclick
49,463
You have a syntax error in your script and thus the js fails.
You have to separate arrays values with commas, i.e. change
//Car Colour Image
var colourImages =
[
"../IMAGES/windowsred.jpg"
"../IMAGES/bmwblue.jpg"
"../IMAGES/bmwgreen.jpg"
];
//Car Window Image
var windowImages =
[
"../IMAGES/bmwwindowred"
"../IMAGESbmwwindowblue"
"../IMAGES/bmwwindowgreen"
];
to
//Car Colour Image
var colourImages =
[
"../IMAGES/windowsred.jpg",
"../IMAGES/bmwblue.jpg",
"../IMAGES/bmwgreen.jpg"
];
//Car Window Image
var windowImages =
[
"../IMAGES/bmwwindowred",
"../IMAGESbmwwindowblue",
"../IMAGES/bmwwindowgreen"
];
Related videos on Youtube
Author by
AlxTay
Updated on July 05, 2022Comments
-
AlxTay almost 2 years
The following functions,
onColourChange
andonWindowChange
, should cycle through images on button click. Instead, I get both:Uncaught ReferenceError: onColourChange is not defined at HTMLButtonElement.onclick
and
Uncaught ReferenceError: onWindowChange is not defined at 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() }
-
AlxTay over 7 yearsIve tried that and I'm still getting the same error :S
-
Lucas Crostarosa over 6 yearsI've always been told that it's best practices to load any scripts last, of course there are always exceptions to the rules, but they're usually there for a reason