ne peut pas changer la source d'une image avec javascript

Question

J'essaye d'afficher des images qui sont envoyées du contrôleur à la vue. Sur la page d'affichage, je veux afficher l'image, et j'ai 2 boutons "en avant" et "en arrière" pour itérer sur ces images.

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

// le corps de mon fichier d'index est vide. Je joins tout le corps du fichier 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 ; 
} 

Le problème est que l'image affichée est toujours la même (Bien que la source change d'image). Je lis ici Change image source with javascript que je devrais utiliser document.getElementById("img").src pour définir la nouvelle source. Mais comme je n'ai aucun img id dans mon fichier html, j'ai cette erreur "impossible de définir la propriété src de null".

Nous vous remercions de votre aide!

Answer 1

var me = $('<div/>'); est fondamentalement (lire: réellement) la création d'un nouveau nœud. Vous ajoutez du contenu à ce noeud, mais vous ne l'ajoutez jamais au DOM. Vous voulez dire probablement quelque chose comme ceci:

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

Cela dit, je ne sais pas si vous avez déjà attribué imageDisplay une valeur à l'intérieur du DOM. Si ce n'est pas le cas, vous devrez peut-être initialiser cette valeur.