added id's to text elements

index.html

@@ -95,15 +95,15 @@ <h1>loading...<br>loading...<br>loading...<br>loading...<br>loading...<br>loadin
       <br>
     </div>
     <div id="notesDiv">
-      <div id="image0"><h2>C</h2></div>
-      <div id="image1"><h2>D</h2></div>
-      <div id="image2"><h2>E</h2></div>
-      <div id="image3"><h2>F</h2></div>
-      <div id="image4"><h2>G</h2></div>
-      <div id="image5"><h2>A</h2></div>
-      <div id="image6"><h2>B</h2></div>
-      <div id="image7"><h2>C</h2></div>
-      <div id="image8"><h2>D</h2></div>
+      <div id="image0"><h2 id="i0">C</h2></div>
+      <div id="image1"><h2 id="i1">D</h2></div>
+      <div id="image2"><h2 id="i2">E</h2></div>
+      <div id="image3"><h2 id="i3" >F</h2></div>
+      <div id="image4"><h2 id="i4">G</h2></div>
+      <div id="image5"><h2 id="i5">A</h2></div>
+      <div id="image6"><h2 id="i6">B</h2></div>
+      <div id="image7"><h2 id="i7">C</h2></div>
+      <div id="image8"><h2 id="i8">D</h2></div>
   </div>
 
     <!-- <span class="clear"></span> this keeps the above elements within the parent div -->

sketch.js

@@ -245,7 +245,7 @@ function handleMouseUp() {
     var elem = evt.targetTouches[0].target.id; //returns the id of the element that triggered the touch
     console.log("image id = "+elem); //debugging
     for(var i = 0; i < 9; i++) { // for loop to check which element it is and get a number to send to the synth
-      if(elem === "image"+i){ // this looks confusing because the id name also contains "i" - see that HTML
+      if(elem === "i"+i || elem === "image"+i){ // this looks confusing because the id name also contains "i" - see that HTML
         playSynth(i); // call the playSynth function
       }
     }
@@ -277,7 +277,7 @@ function handleMouseUp() {
     var elem = touches[0].target.id //returns the id of the element that triggered the touch (that has just ended)
     console.log("ended image id = "+elem); //debugging
     for(var i = 0; i < 9; i++) { //get a number to end the right note
-        if(elem === "image"+i){
+        if(elem === "i"+i || elem === "image"+i){
           stopSynth(i); // call stopSynth
         }
       }