CODEWITHSUNDEEP
javascripthtmlcssimagegetelementbyid
Kelly
Kelly

Reputation: 153

getelementbyid not working

For http://jsfiddle.net/7HWxu/2/ 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. Any help greatly appreciated. Thanks,

Tom

Upvotes: 0

Views: 226

Answers (2)

Sean Vieira
Sean Vieira

Reputation: 159905

The issue is that in this code:

<div class="fadein">
<img src="1.jpg">
<img src="2.jpg">
<img src="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="/images/1_01.jpg" width="68" height="61" alt=""
    onclick="document.getElementById('fadein').src='/1.jpg'">
</td>
<td>
<img src="/images/1_02.jpg" width="61" height="61" alt="">
</td>
<td>
<img src="/images/1_03.jpg" width="61" height="61" alt="">
</td>
<td>
<img src="/images/1_04.jpg" width="61" height="61" alt="">
</td>
</tr>
</table>
<!-- End ImageReady Slices -->
</div>

You don't have any element with an id of "fadein". (And the div element that has a class of "fadein" doesn't have a meaningful src property.)

I note that you have jQuery on the page - rather than using inline event handlers, I suggest you use bind or delegate to manage the links:

// Your original code
$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){
          $('.fadein :first-child').
                             fadeOut().
                             next('img').
                             fadeIn().
                             end().
                             appendTo('.fadein');
     }, 6500);

    // Addenda
    $("#Table_01").delegate("img", "click", function(e) {
            // Show and hide images here based on what e.target is.
     });

});

Upvotes: 2

Pointy
Pointy

Reputation: 413737

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'>

Upvotes: 1

Related Questions