Function calls with loops

Question

Why when I click on my buttons there are always 100 in console log? And how I can fix this?

function SampleFunction(param){
    console.log(param);
}

for (i = 0; i < 100; i++) {
    $("#btn-" + i).on('click',function(e){
        SampleFunction(i);
    });
}

try something like this `$("#btn-" + i).on('click', SampleFunction );`, than use event.target in the function like this `function SampleFunction(e){ elem = e.target; console.log( elem.id ); }` — Hsueh Ming-Fang, Nov 30 '17 at 06:35

score 0 · Accepted Answer · answered Nov 30 '17 at 06:27

0

use let keyword

for (let i = 1; i < 9; i++) {
    $("#btn-" + i).on('click',function(e){
        SampleFunction(i);
    });
}

answered Nov 30 '17 at 06:27

Sudarpo Chong

608
4
12

@nicholas-kyriakides, thanks for down-voting and deleting your own comment T_T – Sudarpo Chong Nov 30 '17 at 06:58
@Anton, please note that `let` is es6, you need to check browser compatibility. probably ie11 doesnt support it – Sudarpo Chong Nov 30 '17 at 07:00

score 0 · Answer 2 · answered Nov 30 '17 at 06:33

0

Pure js approach

let allButtons = document.getElementsByTagName('button');

for(i=0;i<allButtons.length;i++) {
   allButtons[i].onclick = getPosition;
}


function getPosition() {
  let position = Array.from(allButtons).indexOf(this) + 1;
  console.log(`you clicked button at position ${position}`)
}

<button id="button-1">1</button>
<button id="button-2">2</button>
<button id="button-3">3</button>
<button id="button-4">4</button>

answered Nov 30 '17 at 06:33

Rajkumar Somasundaram

1,225
2
10
20

Thank you Rajkumar. With buttons it works pretty well, but using with other dom elements like table rows will cause some trouble. – Anton Bakhirev Nov 30 '17 at 12:27
But your problem statement said buttons , hence I didnt focus on other aspects; – Rajkumar Somasundaram Nov 30 '17 at 12:29

Function calls with loops

2 Answers2