не может изменить источник изображения с помощью javascript

Question

Я пытаюсь отобразить изображения, отправленные с контроллера на представление. На странице просмотра я хочу отобразить изображение, и у меня есть две кнопки «вперед» и «назад» для повторения этих изображений.

//controller: 
var images= [path1 , path2, path3]; 
var currentImageIndex=0; 
function goToNextImage() { // is called when forth button is clicked 
    if (currentImageIndex +1 < images.length) { 
     currentImageIndex ++; 
     imageDisplay= ImageDisplay(images, currentImageIndex); 
    } 
} 

$(document).ready(function() { 
    imageDisplay= ImageDisplay(images, currentImageIndex); 
    $('body').append(imageDisplay); 
}); 

// тело моего индексного файла пуст. Я прилагаю все к телу из файла JavaScript

// view (javascript file) 

function ImageDisplay(images,currentImageIndex) { 
var me = $('<div/>'); 
    drawImage(); 


function drawImage() { 
     var windowWidth= $(window).width(); 
     var windowHeight=$(window).height(); 
     var imageSrc= images[currentImageIndex]; 
     var image = $ ('<img id="img" src="'+imageSrc+'" alt="NO IMAGE" width="'+windowWidth/2+ '" height= "'+windowHeight/2+'" class="image_display"/>'); 
     console.log("image source= "+imageSrc); 

    me.append(image); 
} 
return me ; 
} 

Проблема заключается в том, что отображаемое изображение всегда одинаково (Хотя изменения исходных изображений). Я читал здесь Change image source with javascript, что я должен использовать document.getElementById("img").src для установки нового источника. Но поскольку у меня нет никакого img id в моем html-файле, я получил эту ошибку «не могу установить свойство src null».

Благодарим за помощь!

Answer 1

var me = $('<div/>'); в основном (читать: на самом деле), создавая новый узел. Вы добавляете контент к этому узлу, но вы никогда не добавляете его в DOM. Вы, наверное, имели в виду что-то вроде этого:

var newImage = ImageDisplay(images, currentImageIndex); 
imageDisplay.replaceWith(newImage) 
imageDisplay = newImage; 

То есть, я понятия не имею, если вы когда-либо назначен imageDisplay значение внутри DOM. Если нет, то вам может понадобиться инициализировать это значение.