Is there a way to number my javascript functions in a loop?

Question

Still a beginner in php and javascript but this forum is helping a lot...thanks.

I have a gallery of matched side my side photos (each photo + username + personal statement = ONE unit and contained in a table cell....info is fetched from SQL database as $sql1 and $sql2 below via a 'while' loop; I set a limit = 50 pairs of photos in gallery)....gallery displays perfectly. However, I thought I would make it more user interactive by placing a green outline around the unit onmouseover of an image by user. My test case (using a green outline) works when manually setting ALL variables in a script as follows (shown here with two functions for both GreenBorder and NoBorder in script):

<?php $i=1;


    WHILE (($row = mysql_fetch_assoc(**$sql1**)) && ($drow =   
    mysql_fetch_assoc(**$sql2**))) {

    echo "<script>

          var Outline = new Array();
          for (j=1; j<50; j++) {
          Outline[j] = j;
                               }  


          function GreenBorder1() { 
          document.getElementById('X'+Outline[1]).style.outline = '#00CC00 solid  
          thick';            
          }
          function NoBorder1() { 
          document.getElementById('X'+Outline[1]).style.outline = 'none';              
          }
          function GreenBorder2() { 
          document.getElementById('X'+Outline[2]).style.outline = '#00CC00 solid   
          thick';
          }
          function NoBorder2() { 
          document.getElementById('X'+Outline[2]).style.outline = 'none';
          }

          </script>";

    //Lots of code 

    echo "<td id=\"X".$i."\">";

    //Lots of Code 

    echo "<img src=\"images/**image**.png\" onmouseover=\"GreenBorder".$i."(this)\"  
    onmouseout=\"NoBorder".$i."(this)\">";
    echo "</td>";

    //Lots of Code 


    $i++;
    } // End while
 ?>

Clearly I would prefer to not write 50 functions of the type GreenBorder(number)() and NoBorder(number)() (actually 200 total functions since 50 pairs of photos with GreenBorder or NoBorder). I was looking for some way to do something with my script like the following (my thinking was each run through the 'for' loop would assign a different function number j to GreenBorder and NoBorder, which would match to a specific id also of number j that matched the function number j):

          echo "<script> //I will name this *script2*

          var Outline = new Array();
          for (**j**=1; **j**<50; **j**++) {
          Outline[**j**] = **j**;

          function GreenBorder**j**() { 
          document.getElementById('X'+Outline[**j**]).style.outline = '#00CC00 solid  
          thick';
          }
          function NoBorder**j**()   { 
          document.getElementById('X'+Outline[**j**]).style.outline = 'none';
          }

          }
          </script>";

I tried in a variety of ways to do this (including writing my function names as GreenBorder.j(), GreenBorder+j(), and GreenBorder'j'() and others, including the use of brackets) and have researched; I found this link on the site:

Javascript Array of Functions

but this link's methods all seem to involve actually writing 200 functions (which, at the end of the day, I would do if necessary; my original script should also work). Any way to make the function as compact as I am suggesting in script2 by numbering the functions in a loop?

Not sure I understand. Just to clarify, when you `mouseover` an image added by a particular user, you want all images added by that same user to get a green outline? — showdev, Sep 12 '13 at 16:51
Just an aside, you should be doing this via CSS and not JS. You can set the `:hover` pseudoclass in CSS to get the image to have a border on hover. This is under the assumption that all you are wanting to do is highlight with a border. — JohnP, Sep 12 '13 at 16:53
Thanks for the response showdev.....actually, onmouseover of image within table cell, I want the whole 'unit'= [(image + username + personal statement) within table cell] to have a green outline around it, only for that table cell. Sorry for the ambiguity — The One and Only ChemistryBlob, Sep 12 '13 at 16:54
FYI, instead of creating huge `echo` statements, you can simply end your PHP script: `?>`, output some HTML (or ` — h2ooooooo, Sep 12 '13 at 16:56
Ok, thanks for clarifying. I agree with others, I'd try to use CSS for this. Something like this: http://jsfiddle.net/4VX4D/ But your context may be more complicated. Is it possible to see your HTML or even a [jsfiddle](http://jsfiddle.net/)? — showdev, Sep 12 '13 at 16:58
I tried this with the css method JohnP....works when I set the table cell in css as the element having the outline....now if user scrolls over any point of this table cell, the green outline appears around the table cell. This is excellent, but what I was hoping to do was have this same green outline appear around table cell only when user hovers on the image inside the table cell. Would I set the table cell as a target? For example, add a 'target' statement in the img tag where the 'name' for the target is the table cell 'name'? I will try this out. — The One and Only ChemistryBlob, Sep 12 '13 at 17:22
Hi JohnP, I implemented your code and it worked except the border doesn't wrap around the entire cell. I didn't think it mattered (I'm a beginner) but the image (the hover image mentioned above) is within a 'form' tag...I presume the 'parentNode' is the 'form' (all within table cell). I would appreciate any other suggestions...here's the basic framework: echo ""; echo "User Photo as jpg";echo "Text";echo "
"; echo ""; — The One and Only ChemistryBlob, Sep 12 '13 at 18:08

score 2 · Answer 1 · answered Sep 12 '13 at 17:12

(Assuming that applying the green border is an experiment so you don't want to use CSS. Otherwise, CSS is the way to go here)

From what I understand, this is what you want to do.

You have a unit which is composed of an image and text inside a table cell (TD)
When you hover over the image, you want the TD to have an outline

You only need to write one set of functions to do this.

function GreenBorder(el) {
    //get the parent of whatever node is passed in
    el.parentNode.style.outline = '#00CC00 solid thick';
}

function NoBorder(el) {
    el.parentNode.style.outline = 'none';
}

Your image markup should be like this

<img src="path/to/image" onmouseover="GreenBorder(this)"  onmouseout="NoBorder(this)" >

Here's a fiddle of it - http://jsfiddle.net/5Y6EK/

Simply put, you pass in the currenty hovered image to your function, which modifies the parent node by adding and removing the outline. This assumes that your image is directly under the TD element.

You might want to follow up this experiment by looking at unobtrusive javascript.

Here are some resources

http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

http://www.ibm.com/developerworks/library/wa-aj-unobtrusive/

The IBM article uses jQuery as examples, this is a library worth looking at - http://jquery.com/

Is there a way to number my javascript functions in a loop?

1 Answers1