javascript array images link error

Question

I'm trying to create a mini-book of images using a clip of code i found online which refreshes a set of predefined images onclick via a basic form button, however I can't figure out why the images i've specified in the array are not appearing in the div below. I've confirmed that the url addresses are correct path - but I must be doing something wrong with the linkage ? ?

<html>

<head>
  <title></title>
  <script>
    var bookImages = new Array();

    bookImages[0] = "fsheet1.jpg"
    bookImages[1] = "fsheet2.jpg"
    bookImages[2] = "fsheet3.jpg"
    bookImages[3] = "fsheet4.jpg"
    bookImages[4] = "fsheet5.jpg"
    bookImages[5] = "fsheet6.jpg"

    var i = 0

    function updateImg() {
      var i = i + 1;
      var url = 'url(' + bookImages[i] + ')';
      document.getElementById('bookImg').style.backgroundImage = url;
    }
  </script>

  <style type="text/css">
    #bookImg {
      background-img: url();
      background-repeat: no-repeat;
      background-color: #CF23FA;
      text-align: left;
      width: 150px;
      height: 200px;
      margin-top: 10px;
      margin-left: 15px;
    }
  </style>



</head>

<body>
  <div id='bookImg'>
    <form>
      <input type="button" value=">" onClick="updateImg()">
    </form>
  </div>
</body>

</html>

You have an extra } at the end of your script! And the CSS property is back-ground-image not background-img (you don't to use it anyway in your CSS)! — ibrahim mahrir
– ibrahim mahrir, Commented Apr 16, 2017 at 23:10
ah yr right, but that was just a cut/paste error on my part, the code still isn't working for me ? — tarakotchi
– tarakotchi, Commented Apr 16, 2017 at 23:14
@ArenHovsepyan yeah - my images still aren't loading in the div where the id is calling to them — tarakotchi
– tarakotchi, Commented Apr 16, 2017 at 23:21

ibrahim mahrir · Accepted Answer · 2017-04-17 00:12:55Z

1

The problem:

you are redifining i inside the function updateImg. Technically your function is equivalent to this:

function updateImg() {
  var i;                                  // redeclaring i (i is not initialised so the value is undefined)
  i =  i + 1;                             // undefined + 1
  var url = 'url(' + bookImages[i] + ')'; // url(undefined)
  document.getElementById('bookImg').style.backgroundImage = url;
}

The fix:

function updateImg() {
  i = i + 1; // don't redeclare i just use the outer one (the one above)

  var url = 'url(' + bookImages[i] + ')';
  document.getElementById('bookImg').style.backgroundImage = url;
}

Note:

The above code will increment i without checking if it gone beyond the array boundaries (after 6 clicks i will be 7 and there is no image at index 7 in the array). If you want to go back to 0 when i reaches the end then replace i = i + 1; by i = (i + 1) % bookImages.length;!

Complete code:

<html>

<head>
  <title></title>
  <script>
    // array litterals: a better way
    var bookImages = [
      "http://placehold.it/201x100",
      "http://placehold.it/202x100",
      "http://placehold.it/203x100",
      "http://placehold.it/204x100",
      "http://placehold.it/205x100",
      "http://placehold.it/206x100"
    ];

    var i = 0;

    function updateImg() {
      var url = 'url(' + bookImages[i] + ')';
      document.getElementById('bookImg').style.backgroundImage = url;

      i = (i + 1) % bookImages.length; // increment at the end
    }

    window.addEventListener("load", updateImg); // call it once the document is ready
  </script>

  <style type="text/css">
    #bookImg {
      background-repeat: no-repeat;
      background-color: #CF23FA;
      text-align: left;
      width: 150px;
      height: 200px;
      margin-top: 10px;
      margin-left: 15px;
    }
  </style>



</head>

<body>
  <div id='bookImg'>
    <form>
      <input type="button" value=">" onClick="updateImg()">
    </form>
  </div>
</body>

</html>

edited Apr 17, 2017 at 0:12

answered Apr 16, 2017 at 23:20

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

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

7 Comments

tarakotchi Over a year ago

Ok- this worked in part for me, except that the first time i load the page, the div where the image should display is blank (just a background color displayed) and then when I click the button it scrolls thru the rest of images correctly. Also, i noticed for some reason, the first image in the array is not showing up. what's causing this?

ibrahim mahrir Over a year ago

First: The first call to updateImg won't happen untill someone clicks the button! If you want to do it at start up then just add a call to updateImg after the function definition! Second: In the function you start by incrementing i that is initialized with 0 then you show the image at the new index which is 1 at first call! There is two way of fixing this: 1) you either initialize i with -1 as I said in the comment, or 2) increment i at the end of the function instead of at the begining!

tarakotchi Over a year ago

That code works right for showing all the images in order and continuing to scroll thru after one time, BUT i'm still not getting the (first) image to load initially before someone clicks the button.

ibrahim mahrir Over a year ago

@tarakotchi Ah! you should probably wait for the DOM to load before calling that last line updateImg();!

ibrahim mahrir Over a year ago

@tarakotchi OOOPS! My bad! It should be window.addEventListener("load", updateImg); not document.addEventListener("load", updateImg);! Sorry! I've added a snippett as well!

|

Collectives™ on Stack Overflow

javascript array images link error

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related