Question

I would like to change a title dynamically based on a click I have developed on an image slider. I have tried alert to check my code and each click the alert shows a different name which its supposed to. but when I tried to append() or html() it stays on the first picture name.

var src = $('#slides img').attr('src'); 
$("#image").click(function(){
$("#pic-title").html(src); //this shows the first images' name and never changes.
//$("#pic-title").append(src); //this shows the first images' name and adds on each click, but stays the same name and never changes.
});


<div id="pic-title"></div>

I would like to change the image name and not have it repeat.

Any suggestions?

Thank you

Answer 1

You’re storing the src variable before the user ever clicks on an image, so it’s always going to be the same. Put the var src inside your click function:

$("#image").click(function(){
    var src = this.src;
    $("#pic-title").text(src);
});