2

If I have 3 input boxes on a web page and the user clicks the second input, I need to get the input index, the position of the input on the page. I need it in pure javascript. This is what I have so far but it doesn't work...

 document.querySelector('html').onclick = function (e) {
    log(e);
}

function log(obj) {
    var nodeName = obj.target.nodeName
    var idx = nodeName.length
    console.log(nodeName, idx);
}

Any help would be appreciated!

vsync
  • 118,978
  • 58
  • 307
  • 400
Rob
  • 1,226
  • 3
  • 23
  • 41
  • 1
    "Doesn't work" provides no information. You need to actually describe the problem to get the best help possible. You should explain why what you searched for online did not help and what you have tried to do to solve the problem. – Anonymous Mar 28 '15 at 17:29
  • You should be more clear about what you are looking for. Show a minimal html example with multiple `input` elements and show what index value you expect for those elements. – t.niese Mar 28 '15 at 17:29
  • what do you mean by `position` ? be more clear. are you talking about pixels from top and left or the index (element number) relative to input elements before it? – vsync Mar 28 '15 at 17:33
  • If the user clicks the second input then it should return 2 or if it is zero based then 1. The index would be for just the selected input for the entire document. – Rob Mar 28 '15 at 17:34
  • this has already an answer http://stackoverflow.com/questions/8801787/get-index-of-clicked-element-using-pure-javascript – jrod Mar 28 '15 at 17:46

2 Answers2

3

Pure javascript:

function getIndexFromSet(set, elm){
    var setArr = [].slice.call(set);
    for( var i in setArr )
       if( setArr[i] == elm )
         return i;      
}

The above function can be used like so:

function checkInputFocus(e){
  if(e.target && e.target.nodeName == 'input' )
    index = getIndexFromSet(inputs, e.target);
}

var inputs = document.querySelectorAll('input');
document.addEventListener("click", checkInputFocus);

using jQuery, if you run this on this page (in your console)

var inputs = $('input'); // get all input elements on the page
inputs.index( $('#save-pinned-sites-btn') ); // find the index of spesific one

you will get a number representing the index of an $('#save-pinned-sites-btn') element

Community
  • 1
  • 1
vsync
  • 118,978
  • 58
  • 307
  • 400
  • vsync, the id, class or name is not known so I can't use a for loop on a selector. – Rob Mar 28 '15 at 17:51
  • @Rob, I have updated my answer, so you could just call the function with `this` pointing to the input field, when it's focused – vsync Mar 28 '15 at 17:56
  • thanks vsync, made a slight mod to this var index = getIndexFromSet(document.querySelectorAll('input'), obj.target); and works great! – Rob Mar 28 '15 at 18:01
  • I have updated my answer on how to use it with a delegated `click` event listener (for better performance) – vsync Mar 28 '15 at 18:02
0

Inline:

<input onclick="for(i=0;i<this.parentNode.getElementsByTagName('input').length;i++){if(this==this.parentNode.getElementsByTagName('input')[i]){alert(i);}}">

Or change that to

onclick="show_index(this)"

And Add:

function show_index(which) {
for(i=0;i<which.parentNode.getElementsByTagName('input').length;i++){
if(which==which.parentNode.getElementsByTagName('input')[i]){
alert(i);
}}
DaveHolt
  • 119
  • 1
  • 3
  • 13