Question

Actually I have this piece of HTML code

<form method=POST action=dosomething.php>
    <fieldset>
        <legend>My account</legend>
        <ul>
            <li>
                <label for=email>e-mail</label> 
                <span>
                    <?=$account->email?>
                    (<a name="change">change</a>)
                </span>
                <span name="ph">
                    <input id="email" name="email" placeholder="new email" type=email>
                    <br>
                    <button name="change_email">change</button> or <a name="cancel">undo</a>
                </span>
            </li>
            <li>
                <label for=foo>foo</label>  
                <span>
                    <?=$account->foo?>
                    (<a name="change">change</a>)
                </span>
                <span name="ph">
                    <input id="foo" name="foo" type=text>
                    <br>
                    <button name="change_foo">change</button> or <a name="cancel">undo</a>
                </span>
            </li>
        </ul>
    </fieldset>
</form>

I’ve repeated <li> ... </li> section only 2 times, but they are repeated various times, and you can notice there is a part that is the same for all.

---

I use this JavaScript in order to achieve a very simple thing: show/hide two <span>s.

window.onload = function () { 
/* email */
document.getElementsByName('change')[0].onclick = function () {
    this.parentNode.style.display = 'none'; 
    document.getElementsByName('ph')[0].style.display = 'block';
}
document.getElementsByName('cancel')[0].onclick = function () {
    this.parentNode.style.display = 'none';
    document.getElementsByName('change')[0].parentNode.style.display = 'block';
    document.getElementsByName('change')[0].parentNode.style.width = '100%';
}

/* social id */
document.getElementsByName('change')[1].onclick = function () {
    this.parentNode.style.display = 'none'; 
    document.getElementsByName('ph')[1].style.display = 'block';  
}
document.getElementsByName('cancel')[1].onclick = function () {
    this.parentNode.style.display = 'none';
    document.getElementsByName('change')[1].parentNode.style.display = 'block';
    document.getElementsByName('change')[1].parentNode.style.width = '100%';        
}

/* avatar */
document.getElementsByName('change')[2].onclick = function () {
    this.parentNode.style.display = 'none'; 
    document.getElementsByName('ph')[2].style.display = 'block';  
}
document.getElementsByName('cancel')[2].onclick = function () {
    this.parentNode.style.display = 'none';
    document.getElementsByName('change')[2].parentNode.style.display = 'block';
    document.getElementsByName('change')[2].parentNode.style.width = '100%';        
}

/* shout */
document.getElementsByName('change')[3].onclick = function () {
    this.parentNode.style.display = 'none'; 
    document.getElementsByName('ph')[3].style.display = 'block';  
}
document.getElementsByName('cancel')[3].onclick = function () {
    this.parentNode.style.display = 'none';
    document.getElementsByName('change')[3].parentNode.style.display = 'block';
    document.getElementsByName('change')[3].parentNode.style.width = '100%';        
}
}

This is sooooo LONG … and repetitious.
As you can see, the only part that changes is getElementsByName('change')[aNumber].

My question is:
How can I eliminate redundancy?

A little note: I’d like to see jQuery solutions, but I would prefer to use pure JS.

Thank you in advance!

Answer 1

To do this in JQuery you could use the .each() but I think you’d need to change the markup to use class instead of name because I don’t know of a way to use name as a selector. If there is a way, please tell me!

$('.change').each(function(){
   $(this).click(function(){
      // Click function for 'change'
   });
});

$('.cancel').each(function(){
   $(this).click(function(){
      // Click function for 'cancel'
   });
});