getelementbyid не работает

Question

Для http://jsfiddle.net/7HWxu/2/ Я пытаюсь переопределить цикл изображения четырьмя кнопками, чтобы при нажатии кнопки изображение изменилось. Однако при нажатии «1» изображение не изменится. Любая помощь с благодарностью. Спасибо,

Tom

Answer 1

Проблема в том, что в этом коде:

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

У вас нет элемента с id из "fadein". (И элемент div, который имеет класс"fadein", не имеет значащего свойства src.)

Я отмечаю, что у вас есть jQuery на странице - вместо использования встроенных обработчиков событий, я предлагаю вам использовать bind или delegate для управления ссылками:

// 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.
     });

});

Answer 2

В вашем HTML нет элемента со значением "id" "fadein", поэтому функция возвращает null, как и должно быть.Внешний объект, содержащий <div>, имеет класс"fadein", но не "id".Вы можете изменить <div> Я думаю:

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