How to complete step5?


#1

i can complete the other steps by using jquery like this:
$('#top-text').keyup(function(){
$('.top-caption').text($(this).val());
});
$('#bottom-text').keyup(function(){
$('.bottom-caption').text($(this).val());
});
but as for the final step, I can't get through with the code below(here #test is the id of the img):
$('#img-url').keyup(function(){
$('#test').attr("src",$(this).val());
});
I don't know how to do then


#2

That worked for me

var main = function() {
$("#top-text").keyup(function(){
$('.top-caption').text($(this).val());
});
$("#bottom-text").keyup(function(){
$('.bottom-caption').text($(this).val());
});
$("#image-url").keyup(function(){
$('.meme').children().attr('src', $(this).val());
});
}

$(document).ready(main);


#3

Hi mirremarrer, could you explain why you put .children() in this line of code: ('.meme').children().attr('src', (this).val());?

Thanks for helping.


#4

Hi alessandrohtml5,

I put ('.meme').children().attr('src', (this).val()) - to search for a child in the class .meme that has a source to an image and replace that source name (at the beginning “cat.jpg”) with what you put into #image-url.
It works in this case with children cause .meme has only one image as direct child. If there would be multiple children that were images the code would need to be more specific otherwise you would overwrite all image names and change them accordingly.

Hope that helps.


#5

Thanks a lot mirremarrer, that did help.