Как программно добавить "input" типа "radio"
Здравствуйте!
Задача - к имеющемуся блоку радио-кнопок <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>
|
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>
|
Рони, спасибо!
А почему не работает реакция на onchange, что я неправильно сделал ? |
Рони, у меня еще вопрос:
если после "var new_text = document.createTextNode("qqq");" я задаю новый текст, присваивая значение атрибуту new_text.innerHTML, то текст новой кнопки не меняется, т.е. остается = "qqq". Каким образом и я могу присвоить new_text строку с HTML-тегами ? |
new_text.textContentвместо new_text.innerHTML |
J0hnik, пробовал "new_text.textContent", но насколько я понял, это обычный текст, т.е. теги в нем не воспринимаются.
А мне нужно добавить текст с тегами. |
<!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>
|
Цитата:
Цитата:
смотрите пример j0hnik, и читайте доку https://learn.javascript.ru/modifying-document https://learn.javascript.ru/multi-insert |
Спасибо за подсказки, но я все-таки не понял, почему не работает реакция на событие onchange у программно добавленной радио-кнопки.. :(
|
<!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>
может заранее вешаете? |
| Часовой пояс GMT +3, время: 16:34. |