Why does my onclick“” not work?

Question

Disclaimer: Don't worry about my code being "standards compliant"

Basically, the page I am making is supposed to play a short audio clip upon loading using the <object data="someAudio.wav"> tag. I then use Javascript and setTimeout() to play a couple of other audio files after a few seconds of delay. The setTimeout does this by using innerHTML and rewriting the correct div section with with a new object, where the object is just another audio. For example:

<script type="text/javascript">
setTimeout("update_audio()", 2500);

function update_audio(){
    document.getElementById('slide_audio').innerHTML="<object classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95' height='0' width='0'><param name='FileName' value='../../../Audio_general/good.wav'><param name='autoplay' value='true'><object type='audio/mpeg' height='0' width='0' data='../../../Audio_general/good.wav'><param name='controller' value='true'><param name='autoplay' value='false'></object></object>";
}
</script>

I have the image linked to a map so that it is divided up into the 4 sections. When I click on a section, it will call a function that will perform logic based on my selection and then should play 1 of 2 other audio files. Section of map code here:

<map id="testing_image" name="pictureMap">
    <area id="image1" shape="rect" coords="0, 0, 449, 331"  onclick="evaluate_status(1);" onmouseover="this.style.cursor='pointer'" alt="FB">
</map>

My problem is, the onclick="evaluate_status()" parts of the map will only work before I update the innerHTML. Meaning, if I can click on a section before 2.5 seconds (the first innerHTML update) it will play the correct audio. However, after it updates the div section using innerHTML, none of the onclicks of my map will work. I am confused as to why this is since only a small section is being changed.

Can anyone help me figure out why the onclicks don't work and how I can fix it? I am still pretty new to web design and really need the assistance. Thanks!

Answer 1

You're missing a closing </div> tag for slide_audio , therefore testing_image in fact is a child of slide_audio and is being replaced with the new object when the script runs.

If you look in Firebug with JavaScript disabled you'll be able to see that testing_image is inside slide_audio , not separate from it. Here's a screenshot of Chrome's Developer Tools on that site:

Answer 2

Can you show of evaluate_status() function? Also for the first code

setTimeout("update_audio()", 2500); function update_audio(){ document.getElementById('slide_audio').innerHTML=""; }

You should define the function before you use it in settimeout. This will not generate error in Chrome, but in other browsers, it will.