Random color border (Javascript) around database entries (thumbnails)

Question

at the moment I'm working on a website that is meant to be my portfolio so I wanted it to be a challenge.

The section where I show my work is coded with PHP and is connected to a database. With a WHILE loop it adds all the database records on my website.

For this site I have decided to use Javascript for the first time, to make it more challenging and to learn this as well.

What I want is a border around every database record the PHP WHILE loop adds, which is only shown when hovered over and changes color (fixed array of colors) every time you hover over the thumbnail.

This is the code I have so far:

function loaded() {

        var colors = ["#FC3E6B","#24FF00","#0087F9","#F9F900"];
        var images = document.getElementById("thumbnails").getElementsByTagName("div");

        console.log(images);

        for (var i = 0; i < images.length; i++) {
            var rand   = Math.floor(Math.random()*colors.length);

            images[i].style.borderStyle = 'solid';
            images[i].style.borderWidth = '1px';
            images[i].style.borderColor = 'transparent';

            $(images[i]).hover(function(){
                console.log('hovering over');
                images[i].style.borderColor = colors[rand];
            }, function(){
                console.log('hovering out');
                images[i].style.borderColor = 'transparent';
            });

         };

};

My problem now is that it doesn't work, or partially. This code only applies on the first entry the WHILE loop adds. In the console I can see that the "console.log(images)" only returns the first entry.

Another problem is that it also returns an error:

images[i] is undefined
images[i].style.borderColor = colors[rand];

These are the 2 things I'm struggling with at the moment. It might very well be beginner/easy mistakes since it's my first time working with Javascript.

If there is anything I forgot to mention or you need to know, let me know. I'm looking forward to a reply.

score 0 · Answer 1 · answered Apr 20 '12 at 09:01

Ok, first off: (colors.length - 1) is where you want to go, an array of length 3, has 2 as highest key (0-indexed!)

Second: can you post the actual HTML, or better still: get a jsfiddle up, so we can actually ammend your code, or fork your jsfiddle?

Third: I notice you're using jQuery, have you tried using $('#thumbnails').find('div'); to get your images array? what do you get then?

score 0 · Accepted Answer · answered Apr 20 '12 at 09:15

If I understand you right you should have an HTML page (generated with PHP) that looks like:

<div id="thumbnails">
  <img src="..." />
  <img src="..." />
  <img src="..." />
  ...
</div>

And if you hover one of the images you want to add a border to this an remove the border if the mouse leaves the image. I assume you are using jQuery, so you could add each image a class e.g. <img class="record" src="..." /> and try the following javascript:

$(function() {
  var colors = ["#FC3E6B","#24FF00","#0087F9","#F9F900"];

  $('.record').hover(
    function() {
      var rand = Math.floor(Math.random()*colors.length);

      $(this).css('border-style', 'solid');
      $(this).css('border-width', '1px');
      $(this).css('border-color', colors[rand]);
    },
    function() {
      $(this).css('border-style', 'none');
    }
  );
}).call(this);

Each time the cursor enters an element (in your case an image) this will get a border, if the cursor leavs it the border will be removed.

Thanks! This worked exactly how I pictured it. For some odd reason it does give me an error in the console (something about that it isn't a function) but everything seems to work just fine. — Levi, Apr 20 '12 at 09:47

score 0 · Answer 3 · edited May 23 '17 at 11:55

In case anyone reading this wonders, the reason the original example didn't work is because it is creating a closure. The inner function has access to the variables created in the outer function, but it gets the value of variables when the outer function returns.

In this case, when the code:

images[i].style.borderColor = colors[rand];

executed, the value of i would have been 4, which is outside the range, for each image.

See this for an explanation:

JavaScript closure inside loops – simple practical example

Random color border (Javascript) around database entries (thumbnails)

3 Answers3

Linked