未捕获的ReferenceError :(函数)未在HTMLButtonElement.onclick上定义

编程入门行业动态更新时间:2024-10-27 22:23:57

本文介绍了未捕获的ReferenceError :(函数)未在HTMLButtonElement.onclick上定义的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

以下功能， onColourChange 和 onWindowChange ，应在单击按钮时循环显示图像.相反，我都得到了:

The following functions, onColourChange and onWindowChange, should cycle through images on button click. Instead, I get both:

未捕获的ReferenceError:未定义onColourChange在HTMLButtonElement.onclick

Uncaught ReferenceError: onColourChange is not defined at HTMLButtonElement.onclick

和

未捕获的ReferenceError:未定义onWindowChange在HTMLButtonElement.onclick

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

推荐答案

您的脚本中存在语法错误，因此js失败.

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

更多推荐

未捕获的ReferenceError :(函数)未在HTMLButtonElement.onclick上定义

本文发布于:2023-11-23 03:40:09，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1619950.html