Bonsai img targetted with a class


#1

Hi guys,

I'm done with the task. However, I want to make a slight adjustment in the project.

Instead of changing both pictures when the URL is entered, I just want to change one only with using a class.

HTML

 <div class ="lol">
 <img src="logo.svg">
 </div>

CSS:

.lol {
  padding: 10px 0;
}

// not sure if I actually need to create "lol" class in CSS for this to work. I assume no.

.JS

var main = function() {
  $('#top-text').keyup(function() {
  var toAddtop = $('#top-text').val();
  $('.top-caption').text(toAddtop);
    
  $('#bottom-text').keyup(function() {
  var toAddbottom = $('#bottom-text').val();
  $('.bottom-caption').text(toAddbottom);
    
  $('#image-url').keyup(function() {
  var toAddurl = $("#image-url").val();
  $('.lol').attr('src', toAddurl);
    
});
});
});
};
$(document).ready(main);

Should this work ? it doesn't for me. Not sure why (?)

Thanks in advance !


#2

Your 'lol' class should be attached to the 'img' tag rather than the div. The reason is that the div doesn't have an attribute of src, whereas the img tag does have a src attribute.

Also you'll want to move the "});"s at the end to where each block ends. It should look like this:

[...]
$('#top-text').keyup(function() {
  var toAddtop = $('#top-text').val();
  $('.top-caption').text(toAddtop);
});// add this to the end of each block

//next block
$('#bottom-text').keyup(function() {
  [...]
});

[...]

#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.