title: Onclick with 2 tasks
body: <p>I'm trying to do 2 things at once with OnClick and don't know if I'm coding it wrong or if it's not possible.  I'm trying to click on an image and using onclick go to another image while also playing a sound and then back to the original image.  I have 3 examples in a row.  The first example goes from image1 to image2 and back to image 1 without playing a sound.  The 2nd example goes from image1 to image2 to image3 and back to image 1 without playing a sound.  The third example plays a sound Onclick but its not going to image2.  I want it to play a sound and also go to image2 when I click. Can anyone help?</p>
  
  <p><a href="http://readautism.atwebpages.com/index3.html" rel="nofollow">http://readautism.atwebpages.com/index3.html</a></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="ISO-8859-1" /&gt;
  &lt;title&gt;Example of How to Play a Sound on Click or on MouseOver&lt;/title&gt;
  &lt;script&gt;
  
  var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:
      "mp3": "audio/mpeg",
      "mp4": "audio/mp4",
      "ogg": "audio/ogg",
      "wav": "audio/wav"
  }
  
  function createsoundbite(sound){
      var html5audio=document.createElement('audio')
      if (html5audio.canPlayType){ //check support for HTML5 audio
          for (var i=0; i&lt;arguments.length; i++){
              var sourceel=document.createElement('source')
              sourceel.setAttribute('src', arguments[i])
              if (arguments[i].match(/\.(\w+)$/i))
                  sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
              html5audio.appendChild(sourceel)
          }
          html5audio.load()
          html5audio.playclip=function(){
              html5audio.pause()
              html5audio.currentTime=0
              html5audio.play()
          }
          return html5audio
      }
      else{
          return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
      }
  }
  
  //Initialize two sound clips with 1 fallback file each:
  
  var mouseoversound=createsoundbite("whistle.ogg", "whistle.mp3")
  var clicksound=createsoundbite('http://static.sfdict.com/staticrep/dictaudio/P05/P0501900.mp3', "whistle.ogg")
  var uniquevar=createsoundbite("pizza.wav", "whistle.ogg", "whistle.mp3")
  &lt;/script&gt;
  &lt;script&gt;
  var gStorage = {};
  
  function toogle(anImage, anAltSrcArr) {
      if (typeof(anImage) === "undefined" || typeof(anAltSrcArr) === "undefined" || anAltSrcArr.length === 0) {
          return;
      }
  
      var id = anImage.id;
      var oldSrc = anImage.src;
  
      if (typeof(gStorage[id]) === "undefined") {
          gStorage[id] = {
              'id': id,
              'origSrc': oldSrc,
              'i': 0
          };
      }
  
      gStorage[id].i += 1;
      if (gStorage[id].i &gt; anAltSrcArr.length) {
          gStorage[id].i = 0;
      }
  
      if (gStorage[id].i === 0) {
          anImage.src = gStorage[id].origSrc;
      } else {
          anImage.src = anAltSrcArr[gStorage[id].i - 1];
      }
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body
  &lt;p&gt;Click on an image&lt;/p&gt;
  &lt;img class="with-action" id="image1" name="image1" src="http://dummyimage.com/50/f00/fff&amp;text=a" onclick='toogle(this, ["http://dummyimage.com/50/ab0/fff&amp;text=b"]);' /&gt;
  &lt;img class="with-action" id="image2" name="image2" src="http://dummyimage.com/50/0f0/fff&amp;text=a" onclick='toogle(this, ["http://dummyimage.com/50/0fa/fff&amp;text=b", "http://dummyimage.com/50/0bb/fff&amp;text=c"]);'/&gt;
  &lt;img class="with-action" id="image3" name="image3" src="http://dummyimage.com/50/00f/fff&amp;text=a" onclick="uniquevar.playclip()";'toogle(this, ["http://dummyimage.com/50/ab0/fff&amp;text=b"])'; /&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>