javascript loop: variable equals the last iteration

Question

The code below will add element once user clicks addmore link.

The problem arrives when the user clicks the remove link.

I have something like these on my code

<script language="JavaScript">
var count=1;
function addmore() {
    alert(count);
    var printme = "<table id='table"+count+"'><tr><td><a href='#' onclick='remove(count)'>remove</a></td></tr></table";
    //(other code here)...
    count++;
}

function remove(y) {
    alert(y)
    var tab = 'table'+y;    
    document.getElementById(tab).style.display =  "none";
}
</script>

I used the alert here so I can easily monitor the value of count it gives.

What happens here is that the value of 'y' (on remove function) always the same, which is the last value of count in the loop.

For example I click the link addmore 3 times, therefore the last value of my 'count=4'. And let say I wanted to remove the 3rd element which at this point when i clicked the remove link, it must have pass argument like this remove(3). But what happens here is whatever element i clicked it seems like it always passing argument this way remove(4)

Niet the Dark Absol · Accepted Answer · 2012-12-06 04:27:47Z

2

That's because you have count as a global variable.

Try .....onclick='remove("+count+")'.... to sort of "lock in" the value.

answered Dec 6, 2012 at 4:27

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

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

3 Comments

Kenrick Chien Over a year ago

To add on to this answer: You need to create your HTML immediately,otherwise you retain the current value (the last value) of count through closure.

RobG Over a year ago

@KenrickChien—ooops, there is no closure here. The OP uses a global variable as a formal parameter, a fix is to instead use the value of the variable (as suggested by all answers so far) which also removes the need for the global for this purpose.

Kenrick Chien Over a year ago

@RobG -- my mistake; you're correct about a closure not existing.

suresh gopal · Accepted Answer · 2012-12-06 04:34:00Z

1

Please try this:

var printme = "<table id='table"+count+"'><tr><td><a href='#' onclick='remove("+count+")'>remove</a></td></tr></table";

also try following line remove function:

document.getElementById(""+tab+"").style.display =  "none";

edited Dec 6, 2012 at 4:34

answered Dec 6, 2012 at 4:28

suresh gopal

3,1446 gold badges29 silver badges58 bronze badges

Comments

HMR · Accepted Answer · 2012-12-06 04:48:06Z

1

All previous answers are correct, onclick refers to the current variable count when remove is called.

When you generate the text for the table you use the value of count as it is then:

onclick='remove('+count+')...

You can leave out the id's and count altogether using this:

onclick='remove(this.parentElement.parentElement.parentElement);'...

function remove(elementToRemove){
    elementToRemove.parentElement.removeChild(elementToRemove);
}

answered Dec 6, 2012 at 4:48

HMR

39.5k26 gold badges99 silver badges176 bronze badges

Comments

showi · Accepted Answer · 2012-12-06 04:54:50Z

maybe just onclick='remove('+count+')'

You can do something like

<html>
<head>
<script type="text/javascript">
var count=1;
function addmore() {
    var id = 'table' + count;
    var table = document.createElement('table');
    table.setAttribute('id', id);
    var tr = document.createElement('tr');
    var td = document.createElement('td');
    var a = document.createElement('a');
    a.setAttribute('href', '#');
    a.appendChild(document.createTextNode('remove ' + id));
    a.onclick = function() {
        table.style.display = 'none';
        document.body.removeChild(table);
    };
    td.appendChild(a);
    tr.appendChild(td);
    table.appendChild(tr);
    document.body.appendChild(table);
    count++;
}
</script>
</head>
<body>
<a href="#" onclick="addmore()">Add Table</a>
</body>
</html>

With table reference and onclick defined like this you don't need id

Collectives™ on Stack Overflow

javascript loop: variable equals the last iteration

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related