Форум

Lun2 · #1 (**permalink**) 28.08.2017, 21:58

Здравствуйте!
Задача - к имеющемуся блоку радио-кнопок <input>, заданному в html, программно добавить еще одну радиокнопку с текстом и реакцию на событие onchange.
Посмотрите, пожалуйста, на код - он добавляет радио-кнопку, но событие onchange в нем не работает и ТЕКСТ радио-кнопки ("qq") на экране не высвечивается. Если раскомментировать 2 строки внизу, результат не меняется.
Подскажите, пожалуйста, что не так (сами понимаете, в javascript я новичок):

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<body>

<div>
    <div id="player"  style="float: left">
    </div >
    <div id="speed_buttons">
        <input type="radio" name="play_back_rate" value =4>Ускор = 4<br>
        <input type="radio" name="play_back_rate" value =2>Ускор = 2<br>
        <input type="radio" name="play_back_rate" value =1 checked>Норм = 1<br>
        <input type="radio" name="play_back_rate" value =0.5>Замедл = 0.5<br>
    </div>
</div>
<br clear="all">


</body>
<script>

    // получаем ссылку на блок с кнопками (div)
    var radio_block = document.getElementById("speed_buttons");
    // создаем новый input
    var new_speed = document.createElement('input');

    // устанавливаем атрибуты, события вновь созданного input-a
    new_speed.onchange = 'alert("work!");';
    new_speed.name="play_back_rate";
    new_speed.type = "radio";
    new_speed.value = 99;

    // ХОЧУ, ЧТОБЫ ВОЗНИК ЭТОТ ТЕКСТ, НО НЕ ВЫСВЕЧИВАЕТСЯ:
    new_speed.innerHTML = 'qq<br>';

    // раскомментирование 2 строк далее не помогает
    // new_text = document.createTextNode("qqq");
    // new_speed.appendChild(new_text);
    radio_block.appendChild(new_speed);


</script>

</html>

рони · #2 (**permalink**) 28.08.2017, 23:05

Lun2,

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<body>

<div>
    <div id="player"  style="float: left">
    </div >
    <div id="speed_buttons">
        <input type="radio" name="play_back_rate" value =4>Ускор = 4<br>
        <input type="radio" name="play_back_rate" value =2>Ускор = 2<br>
        <input type="radio" name="play_back_rate" value =1 checked>Норм = 1<br>
        <input type="radio" name="play_back_rate" value =0.5>Замедл = 0.5<br>
    </div>
</div>
<br clear="all">


</body>
<script>

    // получаем ссылку на блок с кнопками (div)
    var radio_block = document.getElementById("speed_buttons");
    // создаем новый input
    var new_speed = document.createElement('input');

    // устанавливаем атрибуты, события вновь созданного input-a
    new_speed.onchange = function() {
alert("work!");
};
    new_speed.name="play_back_rate";
    new_speed.type = "radio";
    new_speed.value = 99;
    radio_block.appendChild(new_speed);

    var new_text = document.createTextNode("qqq");
    radio_block.appendChild(new_text);

    //var new_br = document.createElement('br');
    //radio_block.appendChild(new_br);

</script>

</html>

Lun2 · #3 (**permalink**) 03.09.2017, 21:09

Рони, спасибо!

А почему не работает реакция на onchange, что я неправильно сделал ?

Lun2 · #4 (**permalink**) 03.09.2017, 21:32

Рони, у меня еще вопрос:
если после "var new_text = document.createTextNode("qqq");"

я задаю новый текст, присваивая значение атрибуту new_text.innerHTML,

то текст новой кнопки не меняется, т.е. остается = "qqq".

Каким образом и я могу присвоить new_text строку с HTML-тегами ?

j0hnik · #5 (**permalink**) 03.09.2017, 21:36

new_text.textContent

вместо

new_text.innerHTML

Lun2 · #6 (**permalink**) 03.09.2017, 22:18

J0hnik, пробовал "new_text.textContent", но насколько я понял, это обычный текст, т.е. теги в нем не воспринимаются.
А мне нужно добавить текст с тегами.

j0hnik · #7 (**permalink**) 03.09.2017, 22:44

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<body>

<div>
    <div id="player"  style="float: left">
    </div >
    <div id="speed_buttons">
        <input type="radio" name="play_back_rate" value =4>Ускор = 4<br>
        <input type="radio" name="play_back_rate" value =2>Ускор = 2<br>
        <input type="radio" name="play_back_rate" value =1 checked>Норм = 1<br>
        <input type="radio" name="play_back_rate" value =0.5>Замедл = 0.5<br>
    </div>
</div>
<br clear="all">


</body>
<script>

    // получаем ссылку на блок с кнопками (div)
    var radio_block = document.getElementById("speed_buttons");
    // создаем новый input
    var new_speed = document.createElement('input');

    // устанавливаем атрибуты, события вновь созданного input-a
    new_speed.onchange = 'alert("work!");';
    new_speed.name="play_back_rate";
    new_speed.type = "radio";
    new_speed.value = 99;
    radio_block.appendChild(new_speed);
    radio_block.insertAdjacentHTML('beforeend', 'qqq<div>Hello World</div>');

    //var new_br = document.createElement('br');
    //radio_block.appendChild(new_br);

</script>

</html>

рони · #8 (**permalink**) 04.09.2017, 00:11

Сообщение от Lun2

почему не работает реакция на onchange,

исправил пост №2

Сообщение от Lun2

А мне нужно добавить текст с тегами.

new_text это текстовая нода, может содержать только текст.
смотрите пример j0hnik,
и читайте доку https://learn.javascript.ru/modifying-document
https://learn.javascript.ru/multi-insert

Lun2 · #9 (**permalink**) 07.09.2017, 22:05

Спасибо за подсказки, но я все-таки не понял, почему не работает реакция на событие onchange у программно добавленной радио-кнопки..

j0hnik · #10 (**permalink**) 07.09.2017, 22:45

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<body>

<div>
    <div id="player"  style="float: left">
    </div >
    <div id="speed_buttons">
        <input type="radio" name="play_back_rate" value =4>Ускор = 4<br>
        <input type="radio" name="play_back_rate" value =2>Ускор = 2<br>
        <input type="radio" name="play_back_rate" value =1 checked>Норм = 1<br>
        <input type="radio" name="play_back_rate" value =0.5>Замедл = 0.5<br>
    </div>
</div>
<br clear="all">


</body>
<script>

    // получаем ссылку на блок с кнопками (div)
    var radio_block = document.getElementById("speed_buttons");
    // создаем новый input
    var new_speed = document.createElement('input');

    // устанавливаем атрибуты, события вновь созданного input-a
    new_speed.onchange = 'alert("work!");';
    new_speed.name="play_back_rate";
    new_speed.type = "radio";
    new_speed.value = 99;
    radio_block.appendChild(new_speed);
    radio_block.insertAdjacentHTML('beforeend', 'qqq<div>Hello World</div>');
    new_speed.onchange=e=>alert('проверка связи!');

    //var new_br = document.createElement('br');
    //radio_block.appendChild(new_br);

</script>

</html>

может заранее вешаете?

Форум

Справочник

Discord чат

Курсы javascript