0

I am trying to get the index of the element clicked but for some reason I always get -1. I tried putting the parent as first parameter and the ancestor as second and vice versa but it doesnt work. What am I doing wrong?

HTML Example:

<div>One</div>
<div>Two</div>

JS Example:

function elementNr(target, parent) {
  console.log(Array.prototype.indexOf.call(parent, target));
}

document.body.addEventListener("click", function(e) {
  if(e.target != e.currentTarget) {
    elementNr(e.target, this)
  }
});

I got the idea from this post: problems with Array.prototype.indexOf.call

I wanted to see if this works with event delegation like the example above.

Goal: Using event delegation and Array.prototype I want to get the index of the element clicked.

Community
  • 1
  • 1
Asperger
  • 3,064
  • 8
  • 52
  • 100
  • 1
    It seems you are trying to treat a DOM element as an array. That can't work. What do you mean by "index of the element"? Can you provide a concrete example? – Felix Kling Apr 21 '16 at 20:47
  • What exactly are you trying to do? What are you checking for? – gen_Eric Apr 21 '16 at 20:48
  • 1
    Uhm, I don't see how that would ever work, even if you convert `parent`, which is just the body, to an array, why would `target` ever be in that array – adeneo Apr 21 '16 at 20:49
  • http://stackoverflow.com/questions/17167628/problems-with-array-prototype-indexof-call – mplungjan Apr 21 '16 at 20:49
  • @FelixKling yes of course. Here is a good example: http://stackoverflow.com/questions/17167628/problems-with-array-prototype-indexof-call – Asperger Apr 21 '16 at 20:49
  • @adeneo ya im a bit confused there. I got the basic idea from the link I just posted – Asperger Apr 21 '16 at 20:49
  • X/Y problem? What is the aim of the code – mplungjan Apr 21 '16 at 20:50
  • @mplungjan title says: get index of element clicked – Asperger Apr 21 '16 at 20:51
  • 1
    @Asperger - the example you link to gets the `childNodes`, converts that nodeList to an array, and checks with indexOf if an element is inside that array, it's not the same thing – adeneo Apr 21 '16 at 20:51
  • 1
    @Asperger: Neither `this` nor `e.target` is an array (or array-like object). They are both *one* single element, not a collection of elements. – gen_Eric Apr 21 '16 at 20:51
  • 3
    http://stackoverflow.com/questions/18185738/how-to-find-the-position-for-an-element-in-a-li-with-jquery-or-vanilla-js#answer-18191104 – adeneo Apr 21 '16 at 20:53
  • @RocketHazmat oh crap, you are right as e.target returns the actual element but how do I get the index? Really my bad, im aware of it but you know, mind block xD – Asperger Apr 21 '16 at 20:53
  • 1
    The index of what? Is the target a direct child of document.body, and do you want the index related to it's siblings, or do you want the index of the element based on nested elements, i.e. the entire body, or do you want the index of the element based on it's parent, regardless of what that is, and the siblings .... or .... – adeneo Apr 21 '16 at 20:55
  • it is a direct child of document.body. So if I click on a div of lets say class="test" I want it to return the index. – Asperger Apr 21 '16 at 20:57
  • 2
    `[].slice.call(document.body.children).indexOf(target)` – adeneo Apr 21 '16 at 20:58
  • @adeneo you are right, I saw that on stackoverflow before. – Asperger Apr 21 '16 at 20:59
  • https://jsfiddle.net/btkyu8wr/ – adeneo Apr 21 '16 at 20:59
  • @adeneo unless you are a programming samurai you might want to post it as an answer just in case. – Asperger Apr 21 '16 at 21:00
  • 1
    No worries, I am in fact a programming samurai, just don't tell anyone. – adeneo Apr 21 '16 at 21:01

0 Answers0