CODEWITHSUNDEEP
javascriptjquery
user3910313
user3910313

Reputation: 87

Cannot get source of image

I am trying to get the source of an image to use in a bigger image and the problem is that it just says that it is undefined when it is not. Here is my code and I appreciate the help in advance.

edit It appears the code works perfectly in the code snippet but not here when I open the index file ;(, I have no idea why this is happening... halp me! D:, also, when I inspect the element with my own index.html file, it says that the source is equal to undefined

var src = $('.button').attr('src');
$(document).ready(function() {
  $('.button').click(function() {
    $('.backdrop').animate({
      'opacity': '.5'
    }, 300, 'linear');
    $('.box').animate({
      'opacity': '1.00'
    }, 300, 'linear');
    $('.box, .backdrop').css('display', 'block');
    $('.box').html('<img class="boximg" src="' + src + '">');
  });
});

$(document).ready(function() {
  $('.backdrop').click(function() {
    close_box();
  });

  $('.close').click(function() {
    close_box();
  });
});

function close_box() {
  $('.backdrop, .box').animate({
    'opacity': '0'
  }, 300, 'linear', function() {
    $('.backdrop, .box').css('display', 'none');
  });
}
.backdrop {
  position: absolute;
  display: none;
  top: 0px;
  left: 0px;
  background-color: #000;
  opacity: 0;
  height: 100%;
  width: 100%;
}
.box {
  position: absolute;
  display: none;
  background-color: white;
  opacity: 0;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  border-radius: 13px;
}
.close {
  float: right;
  margin-right: 5px;
}
.boximg {
  position: absolute;
  top: 3%;
  left: 2%;
  width: 96%;
  height: 94%;
}
.button {
  border-radius: 30px;
  height: 300px;
  width: 300px;
}
<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  <script type="text/javascript" src="javascript.js"></script>
</head>

<body>
  <img class="button" src="http://www.hdbackgroundpoint.com/wp-content/uploads/2013/10/13/urlttr.jpeg">
  <div class="backdrop"></div>
  <div class="box">

  </div>
</body>

</html>

Upvotes: 0

Views: 102

Answers (2)

user3910313
user3910313

Reputation: 87

Thanks to one of the comments, I figured it out, I just had to have the var inside of the document.ready function :D

Upvotes: 0

Johan Karlsson
Johan Karlsson

Reputation: 6476

You set the var src = $('.button').attr('src'); before DOM has loaded, and is therefore not defined.

Try moving it inside $(document).ready()

$(document).ready(function() {  
    var src = $('.button').attr('src');

    ...

});

Upvotes: 1

Related Questions