Home > DeveloperSection > Forums > getelementbyid not working using HTML and javascript
jayprakash sharma
jayprakash sharma

Total Post:117

Points:821
Posted on    August-19-2013 12:52 AM

 JavaScript JavaScript 
Ratings:


 1 Reply(s)
 887  View(s)
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,



shreesh chandra shukla
shreesh chandra shukla

Total Post:105

Points:735
Posted on    August-19-2013 8:30 AM

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


Don't want to miss updates? Please click the below button!

Follow MindStick