[SIZE=2][FONT=arial narrow]Hi guys,
I am a newbie, and I need your help on the following:
This is the HTML I have so far, a <ul> with a couple of <li>s.
In every <li> we have:
a <span> , with display: block:
an <a> , with display: block;
and an <input> with display: none; in css.
[/FONT][SIZE=2][FONT=arial narrow]
<ul id=“menu”>
<li class=“menuitem”> <span> Name </span> <a href="#" > Edit here </a> <form> <input type=“text” class=“edit-field” name=“flname”/> </form></li>
<li class=“menuitem”> <span> Location </span> <a href="#" > Edit here </a> <form> <input type=“text” class=“edit-field” name=“location”/> </form></li>
<li class=“menuitem”> <span> Occupation</span> <a href="#" > Edit here </a> <form> <input type=“text” class=“edit-field” name=“occupation”/> </form></li>
<li class=“menuitem”> <span> Birthday</span> <a href="#" > Edit here </a> <form> <input type=“text” class=“edit-field” name=“DOB”/> </form></li>
</ul>
A click event listener is added to the <ul >, the click is delegated to the <a> tag.
This is what I need to do with Javascript only:
If the click was on an anchor tag, find its parentNode (it should be the <li>).
In the parentNode find the span, the input and the a by the Tagname. Hide the span and the anchor, and show the input field.
My question is basically how would I loop through all the <li>, so that clicking on the <a> of the current <li> would hide the <span> and the <a>, and would show the <input> field of that current <li> ?
I might need to add more classes, or IDs, I am not sure…
Thank you for your help. [/FONT][/SIZE]
[/SIZE]
