Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Динамические радиокнопки


Автор: Stampede 6.6.2007, 00:24
Такая загвоздка: я хочу на основе списка строк сформировать ряд радиокнопок. Все вроде через пень-колоду получается (в 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

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

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

счастье будет?))

Автор: Zeroglif 6.6.2007, 10:31
Цитата(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 лучше бы убрать, а что касается стилей радиобатонов, то не все умеют это дело поддерживать...

Автор: GZep 6.6.2007, 10:47
лучше стили радиоБаТоНа вообще не трогать.

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

??? В http://www.w3.org/TR/html401/interact/forms.html#edef-INPUT закрывающий тег forbidden, т.е. этот элемент обязан быть "empty" (см. http://www.w3.org/TR/html401/index/elements.html), о каком же innerHTML может идти речь? А для подписей к кнопкам, насколько мне известно, существует специательный тег http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL...

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


Bingo!

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

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

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

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

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

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

Код

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

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


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

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

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

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

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

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

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

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)