Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Динамические радиокнопки, не могу присвоить текст 
V
    Опции темы
Stampede
Дата 6.6.2007, 00:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Гносеолог
**


Профиль
Группа: Участник Клуба
Сообщений: 963
Регистрация: 25.4.2005
Где: Calgary, Alberta, Canada

Репутация: 4
Всего: 144



Такая загвоздка: я хочу на основе списка строк сформировать ряд радиокнопок. Все вроде через пень-колоду получается (в IE нельзя установить атрибуты type и name после того, как INPUT уже создан по document.createElement(), так что приходится извращаться), но почему-то не отображается текст кнопок:

Вид в FF:

user posted image

Вид в IE:

user posted image

Заодно можно заметить, что в FF почему-то не взялся стиль бэкграунда и рамки, заданный для кнопок.

Код страницы такой:

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
    <title>Radiobutton Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
input {
    display: block;
    background-color: bisque;
    border: 1px solid red;
}
</style>

<script type="text/javascript" language="javascript">

window.onload = build;

function build() {
    var form = document.createElement('form');
    form.name = 'radios';
    document.body.appendChild(form);

    var div = document.createElement('div');
    div.innerHTML = 'This is to show that innerHTML works for DIVs.';
    div.innerHTML += '<br>Unfortunately, it does not for radio buttons:';
    form.appendChild(div);

    var list = ['One', 'Two', 'Three'];

    for (var i = 0; i < list.length; i++) {
        var text = list[i];
        var radio;
        if (document.all) { // this is for IE
            radio = document.createElement('<input type="radio" name="rank" value="' + text + '">');
            // radio.innerText = text; // neither of these is working,
            // radio.innerHTML = text; // error occurs if uncommented
        }
        else { // this is for FF
            radio = document.createElement('input');
            radio.type = 'radio';
            radio.name = 'rank';
            radio.value = text;
            // radio.textContent = text;
            radio.innerHTML = text;

        }
        form.appendChild(radio);
    }
}

</script>

</head>

<body>
</body>

</html>


Потыкать вживую можно вот здесь: http://real-english.ru/data/radio.html

Вопрос: где блин подписи к кнопкам?! И чем эксплореру не нравятся проперти innerText и innerHTML для элемента INPUT?

ЗЫ. Через document.createTextNode() пробовал, не помогает.

ЗЗЫ. Можно, конечно, весь ХТМЛ для формы сверстать на ходу и подсунуть через form.innerHTML, но как-то хочется обойтись без столь радикальных решений smile



--------------------
"If you want something done right, do it yourself"
По секрету: выучить английский - реально!
PM WWW   Вверх
cromm3
Дата 6.6.2007, 01:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



А если так сделать в 35й строке:
Код

form.innerHTML = form.innerHTML+'<input type="radio" name="rank" value="' + text + '">'+text;

счастье будет?))
PM   Вверх
Zeroglif
Дата 6.6.2007, 10:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 28
Всего: 66



Цитата(Stampede @  6.6.2007,  00:24 Найти цитируемый пост)
Через document.createTextNode() пробовал, не помогает.

Должно работать. Закомментируй строчку:

Код

radio.innerHTML = text;


И после:

Код

form.appendChild(radio);


добавь:
     
Код

form.appendChild(document.createTextNode(text));
form.appendChild(document.createElement("br"));


display: block лучше бы убрать, а что касается стилей радиобатонов, то не все умеют это дело поддерживать...


PM MAIL WWW   Вверх
GZep
Дата 6.6.2007, 10:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


участник Винграда
***


Профиль
Группа: Завсегдатай
Сообщений: 1528
Регистрация: 7.7.2006
Где: Москва

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



лучше стили радиоБаТоНа вообще не трогать.


--------------------
user posted imageuser posted image
PM MAIL WWW ICQ Skype GTalk   Вверх
SelenIT
Дата 6.6.2007, 12:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401



Цитата(Stampede @  6.6.2007,  00:24 Найти цитируемый пост)
Вопрос: где блин подписи к кнопкам?! И чем эксплореру не нравятся проперти innerText и innerHTML для элемента INPUT?

??? В стандарте для элемента INPUT закрывающий тег forbidden, т.е. этот элемент обязан быть "empty" (см. табл.), о каком же innerHTML может идти речь? А для подписей к кнопкам, насколько мне известно, существует специательный тег LABEL...


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
Stampede
Дата 6.6.2007, 19:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Гносеолог
**


Профиль
Группа: Участник Клуба
Сообщений: 963
Регистрация: 25.4.2005
Где: Calgary, Alberta, Canada

Репутация: 4
Всего: 144



Цитата(SelenIT @  6.6.2007,  03:16 Найти цитируемый пост)
В стандарте для элемента INPUT закрывающий тег forbidden, т.е. этот элемент обязан быть "empty" (см. табл.)


Bingo!

Вот этого я не знал. Я в общем-то не веб-разработчик по основному, тыкскыть, профилю, и с формами особенно плотно не сталкивался. Но если честно, для меня было большим открытием, что подпись к кнопке не является частью ее определения. Ведь это же абсолютно нелогично - отделять кружок с точкой от связанного с ней текста! При таком подходе сразу возникает масса неудобств, такие как возможность разрыва строки на границе между кнопкой и подписью, "нетыкабельность" подписи, невозможность единообразно задать стиль подсветки, и т. д. Нет, можно, конечно, заключить оба элемента в, скажем, span, и как-то порешать эти вопросы, но это же вариант из серии "tonsillectomy through the rear end"!

Впрочем, ладно. Как есть, так есть. Главное, что вопрос решился. Спасибо всем принявшим участие в обсуждении. Особая благодарность в форме плюса - SelenIT'у, за проявленное понимание сути вопроса и знание правильного ответа.


--------------------
"If you want something done right, do it yourself"
По секрету: выучить английский - реально!
PM WWW   Вверх
WIPS
Дата 6.6.2007, 19:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 199
Регистрация: 22.5.2006
Где: Украина, Киев

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



Цитата(Stampede @  6.6.2007,  18:15 Найти цитируемый пост)
Ведь это же абсолютно нелогично - отделять кружок с точкой от связанного с ней текста!

А если кружек связан с картинкой? Все вполне логично, гибкости больше.

Цитата(Stampede @  6.6.2007,  18:15 Найти цитируемый пост)
"нетыкабельность" подписи

Для избежания этого и есть тэг LABEL, о кот. уже писал SelenIT. В его атрибутах указывается айдишник инпута с кот. он связан, а "тыкабельность" просто превосходная.

Код

<input type="radio" id="radio1"/><label for="radio1">label</label>

--------------------
Автопроизводители, машины, марки, модели!
PM MAIL WWW ICQ Skype   Вверх
Stampede
Дата 6.6.2007, 20:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Гносеолог
**


Профиль
Группа: Участник Клуба
Сообщений: 963
Регистрация: 25.4.2005
Где: Calgary, Alberta, Canada

Репутация: 4
Всего: 144



Цитата(WIPS @  6.6.2007,  10:38 Найти цитируемый пост)
Для избежания этого и есть тэг LABEL, о кот. уже писал SelenIT.


Ага, отлично, все работает! Проблемы растворяются прямо на глазах.

SelenIT, действительно, упоминал LABEL, но я же не знал, что это как-то связано с "тыкабельностью" smile

WIPS, лови плюсА!


--------------------
"If you want something done right, do it yourself"
По секрету: выучить английский - реально!
PM WWW   Вверх
WIPS
Дата 6.6.2007, 20:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 199
Регистрация: 22.5.2006
Где: Украина, Киев

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



Цитата(Stampede @  6.6.2007,  19:23 Найти цитируемый пост)
SelenIT, действительно, упоминал LABEL, но я же не знал, что это как-то связано с "тыкабельностью" smile

Если бы он и про тыкабельность написал мне бы и постить нечего было, а так решил уточнить.

P.S. Пасиб за "+"!

--------------------
Автопроизводители, машины, марки, модели!
PM MAIL WWW ICQ Skype   Вверх
SelenIT
Дата 6.6.2007, 21:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401



Stampede, вдогонку - нередко кнопки и подписи к ним верстают табличкой (по крайней мере, раньше так делали, когда я обязанности верстальщика выполнял;): кнопка в одной колонке, подпись к ней - в следующей. Так удобнее выравнивать их по вертикали (стандартное выравнивание по базовой линии не всегда красиво смотрится, особенно в случае многострочной подписи), применять те же самые стили и т.п. Так что, на мой взгляд, все как раз логично (по крайней мере, с точки зрения верстальщика). А про label и ее "тыкабельность" уже исчерпывающе ответил WIPS smile.

P.S. Спасибо за "+"!


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0572 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.