JavaScript Loop Inside Loop Issue

Question

I have loop inside loop like this:

var len = bolumlerUnique.length;
function bolumleriGonder() {
    for (i = 0; i < bolumlerUnique.length; i++) {
        elementBolumler = $("[bolumid=" + bolumlerUnique[i] + "]:checked");
        console.log(elementBolumler);
        for (j = 0; j < len; j++) {
            console.log(elementBolumler[j])
        }
    }
}

bolumlerUnique is an array --> ["1", "2", "3", "4"]
I have radio inputs and find elements with this code

$("[bolumid=" + bolumlerUnique[i] + "]:checked");

But in the second loop console.log writes undefined.
But elementBolumler is defined global variable.

no var before your elementBolumler variable initiliasation, also maybe no need for the second loop you have access to the element via the elementBolumler (once syntactically correct) in the second loop you are trying to access the index of a single item. — Francis Leigh
– Francis Leigh, Commented Mar 22, 2019 at 13:16
your elementBolumler is simply not an array... so elementBolumler[j] would return undefined — Ludovit Mydla
– Ludovit Mydla, Commented Mar 22, 2019 at 13:19

aliitascan · Accepted Answer · 2019-03-22 13:45:16Z

1

Check your len variable is have a value it must work with your codes.

answered Mar 22, 2019 at 13:45

aliitascan

908 bronze badges

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

1 Comment

Erdoğan Sönmez Over a year ago

Yes, problem was my len variable, because len value is 0, i changed with bolumlerUnique.length and works, thank you!

fdomn-m · Accepted Answer · 2019-03-22 13:37:48Z

in the second loop console.log writes undefined.

To answer the question as (almost) presented: "why do I get undefined with $()[j]?"

Within jquery, if you attempt to get an element by index that's larger than the number of items in the jquery collection, you get undefined (not array out of bounds as it's not an array), ie:

var divs = $(".d");
console.log(divs[0])
console.log(divs[1])  // undefined

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d">d1</div>

The issue is with:

var len = bolumlerUnique.length;
for (j = 0; j < len; j++) {

When you iterate over

$("[bolumid=" + bolumlerUnique[i] + "]:checked")

it will only have as many items as are checked that match the one id. So it's highly likely that

elementBolumler.length !== len

As noted in the comments to the question, [bolumid=" + bolumlerUnique[i] + "] is a radio so it will only ever return one item.

Your logic for the inner loop index len is incorrect, but it's not clear what it should be - possibly:

elementBolumler.length

as in:

function bolumleriGonder() {
    for (i = 0; i < bolumlerUnique.length; i++) {
        elementBolumler = $("[bolumid=" + bolumlerUnique[i] + "]:checked");
        console.log(elementBolumler);
        for (j = 0; j < elementBolumler.length; j++) {
            console.log(elementBolumler[j])
        }
    }
}

Francis Leigh · Accepted Answer · 2019-03-22 13:38:56Z

0

const checkboxesIWantToMessWith = [2, 4, 6]

checkboxesIWantToMessWith.forEach(id => {
  const checkbox = document.querySelector(`input[bolumid="${id}"]`)
  if (checkbox.checked) {
    // Do my stuff
    console.log(`checkbox bolumid="${id}" is checked`)
  } else {
    // Do other stuff
    console.log(`checkbox bolumid="${id}" is NOT checked`)
  }
})

<input type="checkbox" bolumid="1" checked />
<input type="checkbox" bolumid="2" checked />
<input type="checkbox" bolumid="3" checked />
<input type="checkbox" bolumid="4"  />
<input type="checkbox" bolumid="5" checked />
<input type="checkbox" bolumid="6" checked />

edited Mar 22, 2019 at 13:38

answered Mar 22, 2019 at 13:26

Francis Leigh

2,01014 silver badges28 bronze badges

3 Comments

fdomn-m Over a year ago

elementBolumler isn't array, but it is a jquery collection, so elementBolumler[0] is perfectly valid as it's the same as elementBolumler.get(0) or elementBolumler.first().get() and elementBolumler.innerHTML would give an error as it's not a DOM node.

Francis Leigh Over a year ago

Valid point, i've changed my answer to not use JQuery now as querySelector provides allot of the API

fdomn-m Over a year ago

I suspect you may be right and OP has checkboxes, not radios

Collectives™ on Stack Overflow

JavaScript Loop Inside Loop Issue

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related