Retrieving id of DIV fails
<p>I've been trying to load up a DIV by default (dpara) and then allow the user to switch through DIVs depending on the button they press. </p>

<p>On page load - dpara is visible but dtab and ddl are not.</p>

<p>If the user picks dtab for example, dpara is hidden, dtab becomes visible and ddl remains hidden.</p>

<p>But this doesn't seem to be working since I've updated my code from this: </p>

<pre><code>&lt;script type='text/javascript'&gt;
        function arrange(div_id) {
            // First make all the divs hidden...
            divs = document.getElementsByTagName('div');
            for( var i = 0; i &lt; divs.length; i++ ) {
                divs[i].style.display = 'none';
            }

            // Now make the one we want to be visible visible...
            document.getElementById(div_id).style.display = 'block';
        }
    &lt;/script&gt;
    &lt;form&gt;
        &lt;input type='button' value='dpara' onclick='arrange(this.value);' /&gt;
        &lt;input type='button' value='dtab' onclick='arrange(this.value);' /&gt;
        &lt;input type='button' value='ddl' onclick='arrange(this.value);' /&gt;
    &lt;/form&gt;
    &lt;div id='dpara'&gt;
        123
    &lt;/div&gt;

    &lt;div id='dtab'&gt;
        456
    &lt;/div&gt;

    &lt;div id='ddl'&gt;
        789
    &lt;/div&gt;
</code></pre>

<p>In addition to this <strong>var visibleDiv</strong> is mean to store the id of the div I'm passing through - but on alert it returns <strong>[object HTTPInputElement]</strong>. Is there a few steps I've missed? Here is mu new code below:</p>

<pre><code>    &lt;script type='text/javascript'&gt;
var visibleDiv;

function arrange(div) {
    // Cache the passed in 'div' as the currently visible one
    visibleDiv = div;

    alert(visibleDiv);

    // First make all the divs hidden...
    var divs = document.getElementsByTagName('div'),
        i,
        len;

    for (i = 0, len = divs.length; i &lt; len; i++) {
        divs[i].style.display = 'none';
    }

    // Now make the one we want to be visible visible...
    visibleDiv.style.display = 'block';
}
    &lt;/script&gt;
    &lt;form&gt;
        &lt;input type='button' value='dpara' onclick='arrange(this);' /&gt;
        &lt;input type='button' value='dtab' onclick='arrange(this);' /&gt;
        &lt;input type='button' value='ddl' onclick='arrange(this);' /&gt;
    &lt;/form&gt;
    &lt;div id='dpara'&gt;123
    &lt;/div&gt;

    &lt;div id='dtab' style='display: none'&gt;456
    &lt;/div&gt;

    &lt;div id='ddl' style='display: none'&gt;789
    &lt;/div&gt;
</code></pre>
