Hide and Display using "style.display =" problems

[TeddyKiller]

Hi. This uses PHP too. So basically I have a table of users, with a toggle button. The toggle says "edit" to start with. This should hide the users information, replacing it with textboxes. I'm not sure if its the best method to do it... but it's the only one I could think of. The toggle button after clicking changes to 'cancel' to cancel the editting.

 

Okay so, the problem, I can get the information to disappear, but the textboxes don't get displayed, and I'm not quite sure why, it's like it isn't getting the right ID...

 

This is my code.

<style>
<?php for($i = 0; $i <= 8; $i++) echo '#userEdit' . $i . '{display:none;} '; ?>
</style>

<script type="text/javascript">
function editUserData(AMOUNT)
{
    TOGGLE = document.getElementById("toggle");
    
    if(TOGGLE.innerHTML == "Edit") TOGGLE.innerHTML = "Cancel"; else TOGGLE.innerHTML = "Edit";
    
    for(I = 0; I <= AMOUNT; I++)
    {
        userInfo = document.getElementById("userInfo" + I);
        //userEdit = document.getElementById("userEdit" + I);
        
        // Problem with if/else statement
        if(/*userEdit.style.display == "none" && */userInfo.style.display == "")
        {
            userInfo.style.display = "none";
            //userEdit.style.display = "";
        }
        else
        {
            userInfo.style.display = "";
            //userEdit.style.display = "none";
        }
    }
}
</script>

            echo '<div style="text-align:right; width:500px; margin:0 auto;"><span id="toggle" style="color:#e11919; font-weight:bold; cursor:pointer;" onclick="javascript:editUserData(\'' . $amount . '\');">Edit</span></div>';
            
            echo '<table style="text-align:left; margin:0 auto; width:500px;" cellspacing="0" cellpadding="5" border=1>';
            
            $i = 0;
            
            foreach($values as $field => $value)
            {
                echo '<tr><th width=150>' . $field . '</th><td><div id="userInfo' . $i . '">' . $value . '</div><div id="userEdit' . $i . '"><input type="text" name="' . strtolower($field) . '" value="' . $value . '" /></div></td></tr>';
                $i++;
            }
            
            echo '</table>';

 

It works on a query, and an array of fields and answers, I didn't include that as that isn't the problem. My method is changing the display on the div, but it won't.

 

Any ideas?

 

EDIT - The commented lines in the javascript are what is breaking. What I have here, with those commented lines, works fine - but ofcourse, no textboxes get displayed as they are commented.

If I uncommented them, the first click does nothing, the second click then hides it, but of course, by that time, the information is disappeared and "edit" is displayed, it should be cancel. So basically.. I believe the ID that the JS is retrieving, is an ID that is not used, not set, and neither has any css. So first of all, the if statement wouldn't work and would return the else, which will set a css for that ID as "none", meaning the next click... it will display, so the if statement is valid. So basically.. there is no CSS set for the ID the javascript is getting, and it won't even be displayed, because the ID it's getting is not used? If that makes sense...

[TeddyKiller]

Now if I uncomment all the lines, and have userEdit = document.getElementById("userEdit" + I); as userEdit = document.getElementById("userEdit1");, it actually hides every other information, but no textbox is displayed.. then when i click it again, the other information hides, and the hidden one from the last click gets displayed. Which.. makes no sense. I'm only using the ID userEdit1 once. It's set in a loop with $i so it can't possibly have it twice.

 

Confused?

[RussellReal]

oh yeah..

 

how about you follow this guideline here to K.I.S (Keep It Simple)

 

#1 instead of using all ids, use class names.. thats simple enough?

 

then just do like this

 

<style type='text/css'>
.userEdit { display: none; }
.userInfo { display: none; }
.show { display: block; }
</style>
<input type="text" class="userEdit" name="x" />
<span class="userInfo show">The Infoz</span>

 

#2 now that you have a specific piece of information to tie together to your inputs.. you can simply do something like this:

 

<script type="text/javascript">
	edit = false;
	function toggleData() {
		edit = !edit; /* flips edit over E.G. the Toggle */
		inputs = document.getElementsByTagName('input');
		for (i in inputs) {
			if (inputs.className.split(' ')[0] == 'userEdit') inputs[i].className = 'userEdit'+((edit)? ' show':'');
		}
		spans = document.getElementsByTagName('span');
		for (i in spans) {
			if (spans[i].className.split(' ') == 'userInfo') spans[i].className = 'userInfo'+((!edit)? ' show':'');
		}
	}
</script>

 

#3 now that you have this function, dw about the traversing the elements on the page, it really doesn't matter js doesn't make it noticeable that its doing that kinda work unless you have 5,000 spans on the page which even still wouldn't be that noticeable , anyway,

 

now that you have the function you just need to use it!

 

document.getElementById('toggle').onclick = toggleData();

 

 

and there you are! All set!