Cannot get Array.indexOf method to work in Javascript

Question

I have a fairly large program that I have simplified to show the problem that I am having. I have 2 div's under which I have an image and some text. When I hover on the image, the jQuery hover over image event fires. Through all this, I am able to get the Id's of both the images & their parent div's. However, when I try to get the index value of the Id's in an array, it always returns -1 ie... not found.

Can you please help. The code is enclosed below. I am new to javascript & jQuery and hence the need of some help. Maybe the solution is very trivial.

Thanks in advance. Regards, sbguy

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var input_array = new Array("input1_Id", "input2_Id");
var div_array = new Array("div1_Id", "div2_Id");

window.onload=function(){
    jQuery.ready();
    img_hover_event_handler();
}
//________________________________________________  

function img_hover_event_handler() {
    var input_id = "";
    var div_id = "";
    var input_index, div_index;
    $("input.Lrollover").hover(
        function() {    
            input_id = new String(this.id);
            input_index = new String(input_array.indexOf(div_id));
            div_id = new String($(this).closest('div').attr('id')); // id of the parent div
            div_index = new String(div_array.indexOf(div_id));
            alert(input_id + ", " + input_index + ", " + div_id + ", " + div_index);            
        }, 
        function() {
   });  
}

</script>
</head>

<body>
  <div id="div1_Id">
    <input class="Lrollover" id="input1_Id" type="image" src="images/LGbtn_off.png" alt="Image1" />
    <p id="myp1_Id">"Hello World 1"</p>
  </div>
  <br><br><br>
  <div id="div2_Id">
  <input class="Lrollover" id="input2_Id" type="image" src="images/LGbtn_off.png" alt="Image2"/>
    <p id="myp2_Id">Hello World 2"</p>
  </div>

 </body> 
</html>

You're using the Array.indexOf method. Not String.indexOf. — Rob W
– Rob W, Commented Mar 21, 2012 at 11:57

Richard Dalton · Accepted Answer · 2012-03-21 12:00:47Z

2

Few things wrong. Mainly, you are using div_id instead of input_id when looking up the value from the input_array. Also, you shouldnt be doing new String() everywhere and it's better to create your arrays like this:

var input_array = ["input1_Id", "input2_Id"];

Finally, as you aren't using the 2nd function of hover, it makes more sense to just use mouseover instead.

Working code:

var input_array = ["input1_Id", "input2_Id"];
var div_array = ["div1_Id", "div2_Id"];

function img_hover_event_handler() {
    var input_id = "", div_id = "", input_index, div_index;
    $("input.Lrollover").mouseover(
        function() {    
            input_id = this.id;
            input_index = input_array.indexOf(input_id);
            div_id = $(this).closest('div').attr('id');
            div_index = div_array.indexOf(div_id);
            alert(input_id + ", " + input_index + ", " + div_id + ", " + div_index);            
        });  
}

img_hover_event_handler();

Example - http://jsfiddle.net/dNvXp/

answered Mar 21, 2012 at 12:00

Richard Dalton

35.8k6 gold badges75 silver badges92 bronze badges

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

4 Comments

Yoshi Over a year ago

Is there reason to declaring the variables in the img_hover_event_handler instead of the handler function? I think this could lead to unexpected behavior if not handled carefully (though not in this specific code example).

Richard Dalton Over a year ago

@Yoshi I can't think of a reason, I just left it the same as the original code.

sbguy Over a year ago

Hi Richard, I just tried the suggestions you made and it works. Thanks a ton for your help. With Best Regards, sbguy

Pointy Over a year ago

@sbguy if this answer has helped you, you should upvote it and "accept" it by clicking the big checkmark next to it. That's what powers this site :-)

Guffa · Accepted Answer · 2012-03-21 12:03:28Z

1

The Array.indexOf method is not supported in all browsers. There is an inArray method in jQuery to use just for this:

div_index = $.inArray(div_id, div_array);

answered Mar 21, 2012 at 12:03

Guffa

703k111 gold badges760 silver badges1k bronze badges

Comments

jb10210 · Accepted Answer · 2012-03-21 12:03:07Z

0

An array uses integer based indexing, so your code won't work. As I look at your code I think you need something like this:

var input_div = {
  "input1_Id" : "div1_Id", 
  "input2_Id" : "div2_Id"
};

Now if you want to get the id of a div you can do this:

input_id = new String(this.id);
input_div[input_id] // --> this will return the corresponding div id

Hope it helps!

answered Mar 21, 2012 at 12:03

jb10210

1,1765 silver badges16 bronze badges

Collectives™ on Stack Overflow

Cannot get Array.indexOf method to work in Javascript

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related