I have spent some time trying to get this working and have read a good bit online but just can't seem to get it working. I realise that the issue is with the way the DOM loads elements and that I should create a callback function in Jquery. I have no real knowledge of Jquery, so it's probably this that's letting me down.
This is the line in my code that changes the image, and it works fine until it gets to the last one.
document.getElementById("gallows").src = displayGallows[incorrectGuesses - 1];
I have tried using a Jquery function to get this working but my knowledge of Jquery is pretty much non-existent.
var img = $("gallows");
alert("Unlucky, you lost. Better luck next time!");
img.src = displayGallows[incorrectGuesses - 1];
I have compared this to many posts I have found online and to my untrained eye, it looks ok. When I was troubleshooting I did realise that the img.src was assigned the correct value but the image didn't appear on my page or didn't fire the alert box.
This led me to believe that it may be an issue with linking to the jquery.js file. I have an HTML page that references the jquery file in it's head tag.
<link rel="stylesheet" href="base.css"/>
Do I also need to refer to the jquery.js file from the hangman.js file? While reading up on this I found that I may have to do this, so I've tried this:
///<reference path="jquery.js" />
var jq = document.createElement('script');
jq.src = 'jquery.js';
but to no avail, though I don't really understand the second one! I found these examples in the dark recesses of the internet!!
Note that in my home.js file I have simple a simple jquery function to em-bold the text on a button when you mouseover it and this works ok.
If anyone could help me out or point me in the right direction that would be great. I have been banging my head against the wall trying to get this to work!