Javascript Variable for img src?

Question

I can't find the problem with this code and I've been having way too much trouble with it tonight, can anyone help me out?

<html>
    <script type="text/javascript">
      var image = new Array ();
      image[0] = "header1.png";
      image[1] = "header2.png";
      image[2] = "header3.png";
      image[3] = "header4.png";
      var size = image.length
      var x = Math.floor(size*Math.random())
      var backgroundImageFile = image[x];
      var backgroundImageUrl = "url('" + backgroundImageFile + "')";
      $('#header-image').css('background-image', 'backgroundImageUrl');
      function op()
    {
    document.getElementById('header-image').innerHTML=backgroundImageUrl;
    }
    </script>
    <body onload="op();">
    <img src="backgroundImageFile">
    </body>
    </html>

use the variable directly rather than wrapping them in quotes - $('#header-image').css('background-image', backgroundImageUrl); — gurvinder372
– gurvinder372, Commented Sep 20, 2017 at 9:07
what is the problem? What is not working? what issues do you have? what errors do you get? what behaviour do you expect? — N. Ivanov
– N. Ivanov, Commented Sep 20, 2017 at 9:07
the problem is that nothing prints out at all, and I've tried with and without quotes, doesn't work either way. — user8639974
– user8639974, Commented Sep 20, 2017 at 9:10

Kunvar Singh · Accepted Answer · 2017-09-20 09:13:25Z

2

You may try for this:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var image = new Array ();
      image[0] = "https://www.w3schools.com/angular/pic_angular.jpg";
      image[1] = "https://www.w3schools.com/images/colorpicker.gif";
      image[2] = "https://www.w3schools.com/angular/pic_angular.jpg";
      image[3] = "https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_dark_color_84x28dp.png";
      var size = image.length
      var x = Math.floor(size*Math.random());
      var backgroundImageFile = image[x];
$('#imageId')[0].setAttribute('src',backgroundImageFile);
});

</script>
</head>
<body>
 //displays circle with dimensions 

    image here:
  <img src="backgroundImageFile" id="imageId">

</body>
</html>

answered Sep 20, 2017 at 9:13

Kunvar Singh

1,8852 gold badges16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ankit Pandey · Accepted Answer · 2017-09-20 09:17:19Z

Please find the solution: I think you are looking for same.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <script type="text/javascript">
      var image = new Array ();
      image[0] = "header1.png";
      image[1] = "header2.png";
      image[2] = "header3.png";
      image[3] = "header4.png";
      var size = image.length
      var x = Math.floor(size*Math.random())
      var backgroundImageFile = image[x];
      var backgroundImageUrl = "url('" + backgroundImageFile + "')";
      $('#header-image').css('background-image', 'backgroundImageUrl');
      function op()
    {
    document.getElementById('header-image').innerHTML=backgroundImageUrl;
    }
    </script>
    <body onload="op();">
    <img src="backgroundImageFile">
    <div id="header-image"></div>
    </body>
    </html>

Collectives™ on Stack Overflow

Javascript Variable for img src?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related