Question

This should have been pretty straightforward using the DOM but I seem to be getting undefined errors.

Basically, I’m trying to say, when a user clicks a button hide one form and replace it with another. Hiding it should have been as simple as setting style.display : none; but it seems style is constantly undefined.

Here’s the script

function hideTextForm()
{
    var textForm = document.getElementsByClassName("my-text-form");
    //var formContent = textForm.contentDocument;

    console.log(formContent);
    //textForm.visibility='false';
    //textForm.visible(false);
    //textForm.style.visibility = "hidden";
    //formContent.display = "none";

    formContent.style.display = "none";
    console.log(textForm);
    /*this returns:
     <div class="my-list-form">
     <form id="list-form" class="list-form" name="list-form">
     <label>list form here</label>
     </form>
     </div>*/

    console.log("Text form should be hidden");
}

This is only half the different attempts. My gut tells me that the way I’m calling the element is wrong with getElementsByClassName. I’m either calling the wrong element or trying to display it wrong.

Heres the HTML:

<div class="analysis">
            <div class="analysis-columns">
                <div class="analysis-static">
                    <table align = "left" border ="1" id="static-column-table" class="my-columns" >
                        <tr id="tr-static">
                            <th id="table-comment-head">
                                <b>Comments</b>
                            </th>
                        </tr>
                        <tr><td><button class="column-button" value="Page Description">Page Description</button></td></tr>
                        <tr><td><button class="column-button" value="Keywords">Keywords</button></td></tr>
                        <tr><td><button class="column-button" value="Files">Files</button></td></tr>
                        <tr><td><button class="column-button" value="Internal Links">Internal Links</button></td></tr>
                        <tr><td><button class="column-button" value="External Links">External Links</button></td> </tr>

                    </table>
                </div>

                <div class="analysis-custom">
                    <table border ="1" align="right" id="custom-column-table" class="my-columns" >
                        <tr id="tr-custom">
                            <th>Custom</th>
                        </tr>
                        <tr><td><button class="column-button" value="Page Description">Page Description</button></td></tr>
                        <tr><td><button class="column-button" value="Keywords">Keywords</button></td></tr>
                        <tr><td><button  value="Add">Add New Field+</button></td></tr>

                    </table>
                </div>


            </div>
            <div class="analysis-form">

                <input type="radio" name="type-of-row" value="List" title="List" onclick="hideTextForm();"/> List</br>
                <input type="radio" name="type-of-row" value="Text"  title="Text" onclick="hideListForm();"/> Text</br>

                <select>
                    <optgroup label="Type of Row">
                        <option>List</option>
                        <option>TextBox</option>
                    </optgroup>
                </select>
                </br>

                <div class="my-list-form">
                    <form name ="list-form" class = "list-form" id="list-form">
                        <label>list form here</label>
                    </form>
                </div>
                <div class="my-text-form">
                    <form name="text-form" class = "text-form" id="text-form">
                        <label>text form here</label>
                        <!--<textarea cols="30" rows="2">Enter the name of your new Row here...</textarea>
                   <button  value="Page Description" onclick="addRow()">New TextField</button>-->
                    </form>
                </div>

            </div>
</div>

And finally relevant CSS:

div.analysis
{
    padding: 1px;
    width: 100%;
    border: .2em solid #ffcc00;
}
div.analysis-columns
{
    /* border-style: solid;*/
    border: .2em solid #900;
    float: left;
    width:55%;
    /*border: 5;
    border-color: #8a2be2;*/
    display: inline;

}
div.analysis-static
{
    margin: auto;
    padding: 1px;
    width:47%;
    float:left;
    border: .2em solid #0000ff;
    /*border: 3;
    border-color: #0000FF;*/
    /*border-collapse:collapse;*/
    font-family: Century Gothic, sans-serif;

}
div.analysis-custom
{
    margin: auto;
    border: .2em dotted #FFFFDD;
    padding: 1px;
    float: right;
    width:47%;
}
div.analysis-form
{
    margin: auto;
    width:43%;
    border: .2em ridge #b22222;
    float: right;
}
div.my-list-form
{
    display: inherit;
}
div.my-text-form
{
    display: inherit;

}

If anyone is having trouble visualizing it or running it, basically I have a small panel called analysis. Within this panel, is 2 tables (left) and one changing form on the right.
my-list-form and my-text-form should be the only css to worry about.

I’m convinced I’m calling the element wrong so please take a look at document.getElem(“my-text-form”) and what it returns.

Answer 1

Have a look at the method you’re calling — getElementsByClassName. Look at what it returns. It is not a DOM element — it is something called a NodeList. This is an object a bit like an array (though technically not an array) that contains all the elements with that class name. A NodeList doesn’t have a style property, so you can’t set it.

You need to get the first element in the NodeList (using the array notation [0]) and set the style property of that.

var textForm = document.getElementsByClassName("my-text-form")[0];
textForm.style.display = 'none';