VPF::Работаем с DOM - Форум программистов

FiMa1

Дата 16.6.2009, 10:22 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 408
Регистрация: 23.9.2006

Репутация: нет
Всего: 6

Ребята, привет всем.

Начал работать с DOM, много непоняток. Мне нужно перерисовывать форму входа/регистрации, в зависимости от нужд пользователя.
HTML, описывающий форму:

Код


<script type="text/javascript" src="funcs.js"></script>
<div id="form"><h3>Login Form</h3>
    <input id="login" class="input" name="login" type="text" size="20"> login *</br>
    <input id="password" class="input" name="password" type="password" size="20"> password *</br>
    <input id="email" class="input" name="email" type="text" size="20"> email *</br>
    <input id="sendBtn" class="input" type="button" onclick="submitLoginForm()" value="Отправить"/>
</div>
<a href="#" onClick="drawLoginForm();">Login</a>
<a href="#" onClick="drawRegForm();">Registration</a>

Кусок Javascript, описывающий функциональность:

Код


function drawLoginForm() {
    // меняем заголовок с Registration на Login
    replaceText(document.getElementById("form").firstChild, "Login");
    var emailInput = document.getElementById("email");
    if (emailInput != null) { // ЕСЛИ есть поле email, удаляем это поле и его подпись
        var emailInputCaption = emailInput.nextSibling;
        if (emailInputCaption != null && emailInputCaption.nodeName == "#text") {
            br = emailInputCaption.nextSibling;
            if (br.nodeName == "BR")
                document.getElementById("form").removeChild(br);
            emailInputCaption.parentNode.removeChild(emailInputCaption);
        }
        emailInput.parentNode.removeChild(emailInput);
    }
    document.getElementById("login").focus();
}
function drawRegForm() {
    // меняем заголовок с Login на Registration
    replaceText(document.getElementById("form").firstChild, "Registration");
    var emailInput = document.getElementById("email");
    if (emailInput == null) { // ЕСЛИ нет поля email, добавляем его
        var emailInput = document.createElement("input");
        emailInput.type = "text";
        emailInput.name = "email";
        emailInput.id = "email";
        emailInput.size = "20";
        emailInput.class = "input";
    }
    document.getElementById("form").insertBefore(emailInput,
        document.getElementById("sendBtn"));
    document.getElementById("login").focus();
}
function replaceText(el, text) {
    if (el != null) {
        removeAllChilds(el);
        var newNode = document.createTextNode(text);
        el.appendChild(newNode);
    }
}

Это работает в Firefox 3, но отказывается работать в IE 6 (похоже проблема в insertBefore). Поправьте, пожалуйста, ляпы. Посоветуйте что можно было сделать проще, что здесь не кроссбраузерно. Я не стал использовать innerHtml, т.к. в нескольких местах видел предостережения о его устарелости и то, что он не подерживается рядом браузеров (собственно, что и наблюдал в IE).

Astraller

Дата 16.6.2009, 11:00 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 300
Регистрация: 1.8.2007
Где: $Украина[Кры м]->Феодосия

Репутация: 1
Всего: 5

Цитата(FiMa1 @ 16.6.2009, 10:22

)

Странно, везде использую innerHTML и все работает smile

Устаревшим является innerText. smile

Зачем так громоздко мне не ясно smile

Проще содержимое контейнера менять целиком по тому самому innerHTML, и работать оно будет быстрее, ибо DOM работает много медленнее обычного innerHTML.

--------------------

A.S.T.R.A.L.L.E.R.: Artificial Synthetic Technician Responsible for Assassination, Logical Learning and Efficient Repair

FiMa1

Дата 16.6.2009, 11:58 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 408
Регистрация: 23.9.2006

Репутация: нет
Всего: 6

Цитата(Astraller @ 16.6.2009, 11:00)

Странно, везде использую innerHTML и все работает smile

Устаревшим является innerText. smile

Зачем так громоздко мне не ясно smile

Согласен, меня самого именно это и дивило, не мог поверить, что нужно все так усложнять. Возможно именно innerText или document.write() и упоминался как устаревший, видел в книге Маклафлина "Изучаем Ajax" и в нескольких местах в сети, под рукой только скан книги в картинках, не смог найти упоминание о свойстве. Собственно, не знаю откуда и черпать подобную информацию - устарело свойство или нет. Кто каким пользуется справочником? http://www.w3schools.com не дает подобной информации.
Поменял функцию drawRegForm на:

Код


function drawRegForm() {
    replaceText(document.getElementById("form").firstChild, "Registration");
    form = document.getElementById("form");
    if (form)
        document.getElementById("form").innerHtml = "test";
    else
        alert("no form!");
    document.getElementById("login").focus();
}

Заголовок меняет на "Registration", заходит по ветке if, но "test" не пишет...

Это сообщение отредактировал(а) FiMa1 - 16.6.2009, 11:59

Astraller

Дата 16.6.2009, 12:01 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 300
Регистрация: 1.8.2007
Где: $Украина[Кры м]->Феодосия

Репутация: 1
Всего: 5

Цитата(FiMa1 @ 16.6.2009, 11:58

)

Код


document.getElementById("form").innerHtml = "test";

ИМХО: попробуйте сохранить регистр:

Код


document.getElementById("form").innerHTML = "test";

Если не поможет - не поленитесь соорудить примерчик (полный, с HTML-кодом) но без лишнего и выложить сюда, а мы посмотрим где вы ошиблись smile

--------------------

A.S.T.R.A.L.L.E.R.: Artificial Synthetic Technician Responsible for Assassination, Logical Learning and Efficient Repair

FiMa1

Дата 16.6.2009, 12:25 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 408
Регистрация: 23.9.2006

Репутация: нет
Всего: 6

Цитата(Astraller @ 16.6.2009, 12:01)

ИМХО: попробуйте сохранить регистр:

Astraller, точно! Большое спасибо!

Добавлено @ 12:35
Ни фига, поторопился, сработало только в FF3, в IE6 не работает.

Код


<script type="text/javascript">
function drawRegForm() {
    form = document.getElementById("form");
    if (form) form.innerHTML = "test";
}
</script>
<div id="form">
    <p>abc</p>
</div>
<a href="#" onClick="drawRegForm();">Жми</a>

Это сообщение отредактировал(а) FiMa1 - 16.6.2009, 13:16

Aliance

Дата 16.6.2009, 13:13 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

Отсутствует тег <form>
ID лучше не ставить как form, а заменить его скажем на forma
onClick лучше заменить на onclick
внутри функции drawRegForm лучше не делать глобальную переменную без особой на то необходимости
возможно не срабатывает потому что срабатывает стандартное поведение ссылки? лечится след. образом:
Код
<a href="#" onClick="drawRegForm(); return false;">Registration</a>

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

youri

Дата 16.6.2009, 13:27 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 740
Регистрация: 17.4.2004

Репутация: 2
Всего: 16

innerText нету в ff

document.write надо знать, когда использовать: до завершения загрузки страницы или при создании страницы/фрейма с нуля. Но, имхо, он редко нужен

--------------------

С кем разговаривает Microsoft

FiMa1

Дата 16.6.2009, 13:59 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 408
Регистрация: 23.9.2006

Репутация: нет
Всего: 6

Учел все замечания, вот так заработало:

Код


<script type="text/javascript">
function drawRegForm() {
    form = document.getElementById("forma");
    if (form) form.innerHTML = "test";
}
</script>
<div id="forma">
    <p>abc</p>
</div>
<a href="#" onclick="drawRegForm(); return false;">Registration</a>

Стандарт JavaScript. Перевод на русский

youri

Дата 16.6.2009, 16:02 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 740
Регистрация: 17.4.2004

Репутация: 2
Всего: 16

не все: поставь var перед form, иначе form у тебя будет глобальной переменной

--------------------

С кем разговаривает Microsoft

FiMa1

Дата 16.6.2009, 16:04 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 408
Регистрация: 23.9.2006

Репутация: нет
Всего: 6

Цитата(youri @ 16.6.2009, 16:02)

не все: поставь var перед form, иначе form у тебя будет глобальной переменной

oops, спасибо smile

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »