Question

使用DOM应该非常简单，但我似乎得到了未定义的错误。

基本上，我试图说，当用户点击按钮时隐藏一个表单并将其替换为另一个表单。隐藏它应该像设置style.display：none一样简单;但似乎风格一直未定义。

这是脚本

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");
}

这只是不同尝试的一半。我的直觉告诉我，我调用元素的方式与getElementsByClassName有关。我要么调用错误的元素，要么试图将其显示错误。

继承人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>

最后相关的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;

}

如果有人在查看或运行它时遇到问题，基本上我有一个名为分析的小面板。在此面板中，右侧有2个表格（左侧）和一个更改表格。 my-list-form和my-text-form应该是唯一需要担心的问题。

我确信我正在调用元素错误，所以请查看document.getElem（“my-text-form”）及其返回的内容。

Answer 1

getElmentsbyclassname返回一个数组检查以下链接 https://developer.mozilla.org/en/DOM/document.getElementsByClassName

Answer 2

查看您正在调用的方法 - getElementsByClassName。看看它的回报。不是一个DOM元素 - 它叫做NodeList。这是一个有点像数组的对象（虽然技术上不是数组），它包含具有该类名的所有元素。 NodeList没有style属性，因此您无法设置它。

您需要获取NodeList中的第一个元素（使用数组表示法[0]）并设置该属性的style属性。

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

Answer 3

formContent [0] .style.display =“none”。如果您正在使用getElementsByClassName，那么您总是返回一个数组，因此您想要使用该数组的第一个元素

隐藏和整个表单元素

3 个答案: