0

I want the user to be able to search for a guitar chord in my Javascript array and have the page display the chords and images and also a button underneath each image to click and play the sound of the chord. I can get it to display the image and the button underneath but the button clicks do nothing. If I have autostart set to true it will play the last .mp3 sound in the array when the page loads but buttons still do nothing. How can I get this to display the chord or multiple chords with a button underneath that the user can click to hear the chord sound?

Thanks!

Here is what I'm doing when iterating through the array:

if (element === chord) {
  document.write("<table><tr>");
  for (var AChords in CHORDS[i].A) {
    if (CHORDS[i].A.hasOwnProperty(AChords)) {
      if (counter === 2) {
        document.write("</tr><br><tr>");
        counter = 0;
      }
      document.write("<td><img src=" + CHORDS[i].A[AChords].image + "><br><");
      document.write("<input type='button' value='Listen to Chord' onclick=" + playSound(CHORDS[i].A[AChords].sound) + ">");

      counter++;
    }
  }
  document.write("</tr></table>");
}

Here is the function it is calling:

function playSound(soundfile) {
  document.getElementById("sound").innerHTML= "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"false\" loop=\"false\"/>";
}

I do have <span id="sound"></span> in header file

DutGRIFF
  • 4,593
  • 1
  • 29
  • 42
mcirami
  • 3
  • 1
  • Welcome to StackOverflow. I hope my answer was helpful, not just in solving this problem but by helping you with future problems. Let me know if you have more errors and please upvote if the answer helped and accept (check mark) if the answer fully solved your problems. – DutGRIFF Jun 21 '14 at 06:31
  • Please read this SO question: http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice – DutGRIFF Jun 22 '14 at 11:47

1 Answers1

0

After fixing the formatting I am seeing a few things wrong with your code. You should revise your coding habits a bit. docment.write isn't the best solution here. Let's try to get it working though.

First off you have an extra < on the end of document.write("<td><img src=" + CHORDS[i].A[AChords].image + "><br><");.

Second you want to make sure you are writing your quotes to the document too. You are doing <img src=" + CHORDS[i].A[AChords].image + "> where you should have something like <img src='" + CHORDS[i].A[AChords].image + "'>. Notice the ' around src.

Third document.write("<input type='button' value='Listen to Chord' onclick=" + playSound(CHORDS[i].A[AChords].sound) + ">"); is wrong because it executes playSound(CHORDS[i].A[AChords].sound) placing the return value in the onclick. You need something like document.write("<input type='button' value='Listen to Chord' onclick='playSound("+CHORDS[i].A[AChords].sound+")'>");.

I don't know what you are trying to do with the array but I think this is a good place to start. Fix all this stuff and see where it gets you.

Look into using devtools or firebug to inspect element on the page. This will help you see some mistakes and there are so many other helpful features.

UPDATE Based on your comments to this answer

I see what is wrong here. It is a good example of how confusing document.write is. When we write document.write("<input type='button' value='Listen to Chord' onclick='playSound("+CHORDS[i].A[AChords].sound+")'>"); we are outputting <input type='button' value='Listen to Chord' onclick='playSound(../public/sounds/chords/Asharp.mp3)'> this should be <input type='button' value='Listen to Chord' onclick='playSound("../public/sounds/chords/Asharp.mp3")'>. Using document.write this would need to be:

document.write("<input type='button' value='Listen to Chord' onclick='playSound(\""+CHORDS[i].A[AChords].sound+"\")'>");

JSON is a way to store arrays and object(associative arrays) in a string format. The syntax for arrays and objects looks like JSON but JSON is a string that will have to be parsed into the object. You need to know that but it isn't your problem here because you aren't using JSON. If it was JSON simple do var object = JSON.parse(jsonStringVariable); and you have an object similar to the one you are using.

The portion of the object you have in the comment looks good. You can analyze the CHORDS object in the dev console by simply typing CHORDS because it is a global variable and not altered after logging it.

UPDATE

You also want to set autoplay to true if you want the sound to play. Check out this fiddle. I will not use document.write in this situation so I did it a better way. Some parts may be a little confusing but look over it. I removed some pointless code making it easier to follow and I had to use online resources instead of your images and sounds of coarse.

UPDATE

OP has asked me to elaborate on what the difference is between "\" and \"".

The \ is the escape character. You will find this a lot in programming. Use it before a character that usually has another functionality. For instance in our case the " is used around the string to enclose the content of the string. So when we do:

var str = "Some string with a " in it"; 
   //Throws an error right here ^

the second " ends our string. We don't want it to end our string but instead want it escaped so it will just output a ". To do this write

var str = "Some string with a \" in it";
console.log(str); //output: Some string with a " in it
   //no error becuase of this ^

Here are a few common uses:

console.log("Windows uses \\ as their directory separator."); // Windows uses \\ as their directory separator.
console.log("Then again..... \nWindows sucks!"); //Then again..... 
                                                 //Windows sucks!
console.log("When I said \"Windows sucks!\", I meant it."); //When I said "Windows sucks!", I meant it. 

There are many other uses but you can google them.

DutGRIFF
  • 4,593
  • 1
  • 29
  • 42
  • Ok I fixed all that. Now when I click a button I get an error in the console that says: Uncaught SyntaxError: Unexpected token . I don't see a . at all where it's taking me. It takes me to a line of the page that just has on the line. Confused... Thanks for you help! – mcirami Jun 20 '14 at 15:43
  • One more thing. I believe I'm actually using a JSON array (I'm a newbie ;) ) So I'm thinking that would be part of my problem. Here's part of the array I have in .js file: 'code' var CHORDS = [ { id: "A", A: [ {name: "A", image: "../public/img/chords/A.png", sound:"../public/sounds/chords/A.mp3"}, {name: "A flat", image: "../public/img/chords/Aflat.png", sound:"../public/sounds/chords/Aflat.mp3"}, {name: "A sharp", image: "../public/img/chords/Asharp.png", sound:"../public/sounds/chords/Asharp.mp3"}, – mcirami Jun 20 '14 at 16:14
  • @mcirami When you have updated problems like this it is good to make an update to the question like I did with my answer then comment on my answer to let me know your question has been updated. I have solved the problem covered in this comment though. – DutGRIFF Jun 21 '14 at 06:33
  • But I'm still having the same problem, I now just get that Unexpected token error. Still no sound playing. – mcirami Jun 21 '14 at 18:40
  • Right click the button you are about to click and choose "inspect element". Look at the html and make sure in the `onclick` it says `playSound("../public/sounds/chords/A.mp3")` with the quotes around the file path. If it doesn't have the quotes, follow the advise in my first **UPDATE** above. I was able to recreate your problem and fixed it with that update. Then I went on to create a fiddle showing a better way to do this. Be sure to see my last **UPDATE** too. – DutGRIFF Jun 22 '14 at 14:03
  • Thank you! Thank you! Thank you! That was the problem. It is working now. I tried to vote up but it's telling me I need a 15 reputation to do that. Sorry about that. As I said I'm brand new on here. I did click the check mark though. I will definitely take a look at your code on fiddle and learn how to do this a better way. Would you mind explaining the \"" and "\" you had me change that to? Don't understand what that's doing exactly. I had to use that in my function too but I pretty much just copied that from somewhere. Thanks again!! – mcirami Jun 23 '14 at 14:41
  • Adding an update to explain this. I am really glad you are curious to know and not just content with it working. This is a sign that your will be a good programmer. So many people just come here for the fix and don't care to learn why it worked. – DutGRIFF Jun 23 '14 at 21:52