Index value in javascript

Question

I have the following code:

<script type="text/javascript" >

   function showAlert()
   {
      alert("I am clicked"+this.innerHTML+this.index);
   }

   window.onload = function one()
   {
      var a1 = [1,2,3];
      for (var i=0;i<a1.length;i++)
      {
         var p = document.createElement('p');
         p.innerHTML = a1[i];
         p.onclick = showAlert;
         document.body.appendChild(p);
      }
      console.log("I am called");
   }

</script>

this.innerHTML alerts the value of the element clicked but this.index shows undefined. How can I get the index value of array element clicked using javascript?

in your showAlert function, this represents an html object which doesn't have any index attribute. you should store the array index value in the id attribute of the html element, or a data-XXX attribute. — Lord Grosse Jeanine
– Lord Grosse Jeanine, Commented May 20, 2014 at 15:51

T.J. Crowder · Accepted Answer · 2014-05-20 15:56:00Z

3

this.innerHTML alerts the value of the element clicked but this.index shows undefined.

That's because DOM elements don't have an index property.

If you want to use the index (I assume you're talking about the i value where you created the paragraph), you can store that on the DOM element in a data-* attribute:

// In the loop creating the paragraphs...
p.setAttribute("data-index", i);

...and then use it via getAttribute:

alert("I am clicked"+this.innerHTML+this.getAttribute("data-index"));

Technically, you could use an "expando" property as well:

// In the loop creating the paragraphs...
p.myReallyUniqueName = i;

...and then use it:

alert("I am clicked"+this.innerHTML+this.myReallyUniqueName);

...but doing so is generally not considered best practice, not least because you have to be careful not to use a name that may be used for something else in the DOM later. (I'd stay away from index, for instance.) data-* attributes are explicitly reserved for this kind of ad hoc information.

edited May 20, 2014 at 15:56

answered May 20, 2014 at 15:50

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

2 Comments

user2567857 Over a year ago

Thanks, but I would prefer keeping my code simple. So, I would go for set and get.

T.J. Crowder Over a year ago

@user2567857: Right. That was my first suggestion.

Perfect28 · Accepted Answer · 2014-05-20 15:50:35Z

0

In your example this reference the paragrah element. So it doesn't have any property index.

One way to find the clicked index is to pass it as the paragraph's attribute like this :

function showAlert(){
  alert("I am clicked"+this.innerHTML+this.getAttribute('index'));
}

window.onload = function one(){
var a1 = [1,2,3];
for (var i=0;i<a1.length;i++) {
var p = document.createElement('p');
p.innerHTML = a1[i];
p.onclick = showAlert;
p.setAttribute("index", i); // Set the attribute index to <p>
document.body.appendChild(p);
}

 console.log("I am called");

}

answered May 20, 2014 at 15:50

Perfect28

11.3k3 gold badges29 silver badges50 bronze badges

Comments

scripto · Accepted Answer · 2014-05-20 15:58:26Z

-2

I can suggest you a jQuery solution. You can use $(this).index() to get the element's index. Hope this helps.

answered May 20, 2014 at 15:58

scripto

2,2971 gold badge14 silver badges13 bronze badges

1 Comment

user2567857 Over a year ago

I knew the jquery thingy, so I explicitly suggested javascript

Collectives™ on Stack Overflow

Index value in javascript

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related