How to get index of an array element in click event with JavaScript

Question

I'm developing an Electron App, and for this specific part of the code, it's necessary that I recover the index of the current element (on click).

HTML:

<div>
    <input type="checkbox" class="optionBox"> Minimize to tray after 10 seconds
    <input type="checkbox" class="optionBox"> Always check day transition
</div>

JavaScript:

modifierCheckboxes = document.querySelectorAll('.optionBox');

for (var i = 0; i < modifierCheckboxes.length; i++) {
    modifierCheckboxes[i].addEventListener('click', function (e) {
        bindModifierCheckBoxes(e);
    });
}

function bindModifierCheckBoxes(e) {
    // I need the reference for modifierCheckboxes[i] here 
}

I've tried this:

function bindModifierCheckBoxes(e){
    var t=e.target;
    console.log(Array.prototype.indexOf.call(t.parentNode.childNodes,t));
}

It came "close", but when I click on the first checkbox, I get index of 1, and in the second one I get 3.

Please, no external libraries, just plain JavaScript.

BTW, [].indexOf is a shorter version of Array.prototype.indexOf — John Hascall
– John Hascall, Commented Jan 20, 2017 at 2:58
@JohnHascall my advice would be to stay away from .indexOf because it is not cross-browswer compatible. There are other, safer JavaScript methods to check for string literals, etc. .match() and .test() respectively acheives what .indexOf() does and is cross-browser compatible. — Alexander Dixon
– Alexander Dixon, Commented Jan 20, 2017 at 3:44

codesandtags · Accepted Answer · 2017-01-20 03:14:31Z

9

Maybe you can convert the Object selector to an array and then you can use an indexOf.

var checks = document.querySelectorAll('.optionBox');

checks.forEach(function(check){
  check.addEventListener('click', checkIndex);
})

function checkIndex(event){
  console.log( Array.from(checks).indexOf(event.target) );
}

edited Jan 20, 2017 at 3:14

answered Jan 20, 2017 at 3:08

codesandtags

4023 silver badges9 bronze badges

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

1 Comment

David Chavez Over a year ago

But you didn't need to complicate it that much. Here I got the same result using your method but in a much simpler way:

modifierCheckboxes = document.querySelectorAll('.optionBox'); modifierCheckboxes.forEach(checkbox => {   checkbox.addEventListener('click', (e)=> {     console.log( Array.from(plusBtns).indexOf(e.target) ) //...etc     }); }

@Codes

ibrahim mahrir · Accepted Answer · 2017-01-20 04:01:31Z

4

Make use of closures:

modifierCheckboxes = document.querySelectorAll('.optionBox');

modifierCheckboxes.forEach(function(checkbox, i) {
    checkbox.checked = customConf[i];;
    checkbox.addEventListener('click', function (e) {
        bindModifierCheckBoxes(e, i);
    });
});

function bindModifierCheckBoxes(e, index) {
    // index is passed inside the event listener function
}

edited Jan 20, 2017 at 4:01

answered Jan 20, 2017 at 2:59

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

4 Comments

Amir Over a year ago

Clever! Only thing, you may have to use i + 1 inside the listener or use index +1 inside the Modifier function.

ibrahim mahrir Over a year ago

@Amir I think he wants it like that so he can access an array (probably customConf again). Plus it's clear. He can adapt it to his need.

Rick Stanley Over a year ago

I've tried that too, but the variable i always gets caught with the value 2, and pass modifierCheckboxes[i] didn't help either

ibrahim mahrir Over a year ago

@RickStanley you were right. for ruins the closure as it continue to modify i which whenever bindModifierCheckBoxes get executed it will fetch in the scope it was defined in only to find that i is now equal to the length of the array. But forEach fix that as it will create an i for each checkbox (separate scopes) so now it works.

Jaromanda X · Accepted Answer · 2017-01-20 02:53:44Z

2

use .children instead of .childNodes ... .children gives a list of child Elements excluding text nodes

in HTML, when you nicely format your source, there's text nodes between > and < that don't (usually) effect the rendering of the page

answered Jan 20, 2017 at 2:53

Jaromanda X

57.1k6 gold badges82 silver badges96 bronze badges

Comments

Amir · Accepted Answer · 2017-01-20 02:59:13Z

1

function bindModifierCheckBoxes(e) {
    var t=e.target;
    var checkboxes = t.parentNode.getElementsByClassName('optionBox');
    console.log(Array.prototype.indexOf.call(checkboxes, t) + 1);
}

Here is a fiddle: https://jsfiddle.net/7p3gsy75/

answered Jan 20, 2017 at 2:59

Amir

4864 silver badges14 bronze badges

Comments

John Hascall · Accepted Answer · 2017-01-20 03:06:43Z

1

Another option would be to give your checkboxes id's (here I chose lame ones):

<div>
  <input type="checkbox" id="cb1" class="optionBox"> Minimize to tray after 10 seconds
  <input type="checkbox" id="cb2" class="optionBox"> Always check day transition
</div>

and then look at e.target.id

answered Jan 20, 2017 at 3:06

John Hascall

9,4446 gold badges51 silver badges73 bronze badges

Comments

Yaser · Accepted Answer · 2017-01-20 02:57:08Z

0

You can use change instead of click:

$('.optionBox').on('change', function() {
    $(this).each(function() {
        if (this.checked) {
            alert($(this).index());
        } else {
            alert("unchecked");
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
      <input type="checkbox" class="optionBox"> Minimize to tray after 10 seconds
      <input type="checkbox" class="optionBox"> Always check day transition
  </div>

answered Jan 20, 2017 at 2:57

Yaser

5,7391 gold badge18 silver badges28 bronze badges

Comments

Sphinx117 · Accepted Answer · 2017-01-20 03:04:16Z

0

Pass modifierCheckboxed[i] to your bindModifierCheckBoxes function. So you send the référence of the current checkbox then you can do what you want with it.

edited Jan 20, 2017 at 3:04

answered Jan 20, 2017 at 2:58

Sphinx117

971 silver badge5 bronze badges

Comments

Carsten Massmann · Accepted Answer · 2024-11-16 14:50:37Z

Here is another suggestion that will work on pages where additional check boxes might be added later on.

// Things might become dynamic on your page ...
const div=document.querySelector("div");
document.querySelectorAll("button").forEach(b=>b.addEventListener("click",ev=>div.insertAdjacentHTML(ev.target.textContent,'<label><input type="checkbox" class="optionBox"> A new option box!</label>')));

// This will always show the correct index number of your checkbox:
div.addEventListener("click",ev=>{
 if(ev.target.matches(".optionBox")){
  const o=ev.target.closest("label");
  console.log(`changed optionBox ${[...div.querySelectorAll("label:has(.optionBox)")].indexOf(o)+1}.`);
}})

label {display:block}

<button>afterbegin</button>
<div><div>
 Some text before we start.
<label><input type="checkbox"> This checkbox should not be counted and not trigger anything.</label>
<label><input type="checkbox" class="optionBox"> Minimize to tray after 10 seconds</label>
<label><input type="checkbox" class="optionBox"> Always check day transition</label>
 And some text at the end.
</div></div>
<button>beforeend</button>

The general idea is to work with delegated click event handling and to re-establish the list of applicable check boxes after each click.

Collectives™ on Stack Overflow

How to get index of an array element in click event with JavaScript

8 Answers 8

1 Comment

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related