title: Uncaught ReferenceError: (function) not defined at HTMLButtonElement.onclick
body: <p>The following functions, <code>onColourChange</code> and <code>onWindowChange</code>, should cycle through images on button click. Instead, I get both: </p>
  
  <blockquote>
    <p>Uncaught ReferenceError: onColourChange is not defined
        at HTMLButtonElement.onclick</p>
  </blockquote>
  
  <p>and</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: onWindowChange is not defined
        at HTMLButtonElement.onclick</p>
  </blockquote>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>    &lt;head&gt;
      &lt;title&gt;TravelSmart&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="../CSS/style.css"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link rel="icon" href="../IMAGES/TravelSmart.ico"&gt;
      &lt;script type="text/javascript" language="javascript" src="../JS/bmwcustom.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id=wrapper&gt; 
      &lt;header&gt;
          &lt;img class="logo" src="../IMAGES/TravelSmart.png"&gt;
      &lt;/header&gt;
  
      &lt;nav&gt;   
          &lt;ul class="navbar"&gt;
              &lt;li&gt;&lt;a class="active" href="../HTML/index.htm"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="../HTML/News.html"&gt;News&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="../HTML/Products.html"&gt;Products&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="../HTML/OpeningHours.html"&gt;Opening Hours&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="../HTML/Location.html"&gt;Location&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="../HTML/Offers.html"&gt;Offers&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  
  &lt;main&gt;
      &lt;div class="customcontainer"&gt;
          &lt;div class="colour"&gt;
              &lt;img id="colour-image" src="../IMAGES/o"/&gt;
              &lt;button class="left-button" onclick="onColourChange(+1)"&gt;&amp;laquo;&lt;/button&gt;
              &lt;button class="right-button" onclick="onColourChange(+1)"&gt;&amp;raquo;&lt;/button&gt;
          &lt;/div&gt;
  
          &lt;div class="windows"&gt;
          &lt;img id="windows-image" src="../IMAGES/x"/&gt;
          &lt;button class="left-button" onclick="onWindowChange(+1)"&gt;&amp;laquo;&lt;/button&gt;
          &lt;button class="right-button" onclick="onWindowChange(+1)"&gt;&amp;raquo;&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;input id="selector-box" type="text" value="h: 0 | t: 0" readonly /&gt;
  
  &lt;/main&gt;
  
  
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>//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 &lt; 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 &lt; 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()
  }
  </code></pre>