getelementbyid not working using HTML and javascript

Total Post:117

Points:821
 1537  View(s)
Ratings:
Rate this:
Hi developers!

I am trying to override the image loop with the four buttons so that when one is clicked the image changes. However, on click of "1" the image won't change.

My css

<div class="fadein">
<img src="http://www.zabb.co.uk/1.jpg">
<img src="http://www.zabb.co.uk/2.jpg">
<img src="http://www.zabb.co.uk/3.jpg"></div>
<div style="position:absolute;">
<!-- ImageReady Slices (1.jpg) -->
<table id="Table_01" width="251" height="61" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
             <img src="http://www.zabb.co.uk/images/1_01.jpg" width="68" height="61" alt="" onclick="document.getElementById('fadein').src='http://www.zabb.co.uk/1.jpg'"></td>
        <td>
            <img src="http://www.zabb.co.uk/images/1_02.jpg" width="61" height="61" alt=""></td>
        <td>
            <img src="http://www.zabb.co.uk/images/1_03.jpg" width="61" height="61" alt=""></td>
        <td>
            <img src="http://www.zabb.co.uk/images/1_04.jpg" width="61" height="61" alt=""></td>
    </tr>
</table>
<!-- End ImageReady Slices -->
</div>
JQuery code
$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 6500);
});

HTML Code:-

body {font-family:Arial, Helvetica, sans-serif; font-size:12px;} 
.fadein { position:relative; height:332px; width:500px; }
.fadein img { position:absolute; left:0; top:0; }

 Any help greatly appreciated. Thanks,

  1. Post:105

    Points:735
    Re: getelementbyid not working using HTML and javascript

    Hi!

    There's no element in your HTML with the "id" value "fadein", so the function returns null as it should. The outer containing <div> has the class "fadein", but not "id". You could change the <div> I guess:

    <div class='fadein' id='fadein'>

Answer