Сокрытие и весь элемент формы - PullRequest
Новая
       15

Сокрытие и весь элемент формы

0 голосов
/ 26 июля 2011

Это должно быть довольно просто, используя DOM, но я, кажется, получаю неопределенные ошибки.

В принципе, я пытаюсь сказать, когда пользователь нажимает кнопку, скрывает одну форму и заменяет ее другой.,Чтобы скрыть это, нужно было просто установить style.display: нет;но кажется, что стиль постоянно не определен.

Вот сценарий 

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 должны быть единственными CSS, о которых нужно беспокоиться.

Я убежден, что неправильно называю элемент, поэтому, пожалуйста, посмотрите на document.getElem ("my-text-form ") и что он возвращает.

Ответы [ 3 ]

2 голосов
/ 26 июля 2011

getElmentsbyclassname возвращает массив проверьте ссылку ниже https://developer.mozilla.org/en/DOM/document.getElementsByClassName

1 голос
/ 26 июля 2011

Посмотрите на метод, который вы вызываете - getElementsByClassName.Посмотрите, что он возвращает.Это не элемент DOM - это то, что называется NodeList.Это объект, похожий на массив (хотя технически это не массив), который содержит все элементы с этим именем класса.NodeList не имеет свойства style, поэтому вы не можете его установить.

Вам необходимо получить первый элемент в NodeList (используя запись массива [0]) и установить style свойство этого. 

var textForm = document.getElementsByClassName("my-text-form")[0];
textForm.style.display = 'none';
0 голосов
/ 26 июля 2011

formContent [0] .style.display = "нет". Если вы работаете с getElementsByClassName, вы всегда возвращаете массив, поэтому вы хотите использовать первый элемент этого массива

...