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.