Bonsai - changing the meme image


#1

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

}

$(document).ready(main);

i'm trying to change the meme image, but not sure what i'm doing wrong. can someone help? thank you.


#3

Without looking at the actual project, this jumps out. It is not very specific and will build a collection of all the image elements in the page. If the img has an id, or a constant node in the document tree, build a specific selector for just that one image.

I believe src should be in quotes, and toAdd not. It should already be a string. jQuery will supply the quotes around the URL.

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
  <div>
    <!-- generated img tag with src attribute -->
    <img src="https://s3.amazonaws.com/codecademy-images/discuss_cc-logo.png"> 
  </div>

<script>
var src = "https://s3.amazonaws.com/codecademy-images/discuss_cc-logo.png";
$('<img>').attr('src',src).appendTo('div');
</script>

</body>
</html>

#4

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

}

$(document).ready(main);

i made the changes, but it still doesn't work. any ideas? Thank you.


#5

I haven't done this project, but I will take a look. Can you please post a link to the exercise you are currently on? Thank you.


#6

Should this be '#image-url' ? I'm guessing these are input fields? If so, the event object is the input field? In which case you can use, $(this).val() for simplicity.


#7

Hey, that worked. Thanks for your help.


#9