Question

i have a javascript function who’s task is to show the hidden rows of a table
javascript function:

function blabla(count){
 count++;  var id="ph"+count; 
 document.getElementById(id).style.display=""; 
}

Then i have a table in the same document with a button on the 1st row which triggers onclick event:

<script to declare globale variable count=1/>
<table>
 <tr id="ph1"><td>haha:<button onClick="blabla(count)"><button></td></tr>
 <tr id="ph2" style="display:none"><td>hoho</td></tr>
 <tr id="ph3" style="display:none"><td>hihi</td></tr>
</table>

when the page is loaded and i click on the button one time:the second row is shown..but when i click on it the second time..the third row is Not displayed…
Why is that?
anyone can help me out?

Answer 1

It’s because the variable “count” disappears as soon as the function call ends, so you end up showing the same table row every time. You could try moving the variable to global scope:

var count = 1;
function blabla() {
    count++;
    var id="ph"+count;
    document.getElementById(id).style.display="";
}

Based on your html, you could then change it like this:

<table> 
    <tr id="ph1">
        <td>haha:</td>
        <td><input type="file" id="w"/></td>
        <td><img src="Style/Images/plus.jpg" onClick="blabla()"/></td>
    </tr> 
    <tr id="ph2" style="display:none">
        <td>hoho:</td>
        <td><input type="file" id="1"/></td>
    </tr> 
    <tr id="ph3" style="display:none">
        <td>hihi:</td>
        <td><input type="file" id="2"/></td>
    </tr> 
</table>

So, just remove the count from the function call.

However, you will encounter an error when you keep pressing the button (when you run out of elements with ids starting with “ph”). If you don’t want this to happen, do something like this:

var count = 2;
function blabla() {
    var element = document.getElementById("ph" + count);
    if (!element) {
        alert('No more rows!');
    } else {
        element.style.display = "";
        count++;
    }
}

Finally, this could be done more robustly using something like jQuery, but I try to stay as close to your original code as possible.