Создание страницы с полем ввода и кнопкой
Необходимо создать страницу с полем ввода и копкой. В поле ввода нужно будет ввести значение для создания нужного количества пронумерованных блоков div 50x50 Px красной заливкой. Создание блоков производить по нажатии на кнопку. При выводе блоков поле ввода и кнопка должны оставаться на месте, а блоки раз мешаться под ними.
ЗАРАНЕЕ СПАСИБО! |
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<input id='n' type='text'>
<input type='button' onclick='if(!createBlock()) {alert("Invalid input value")}'>
<div id='insert'></div>
<script>
function createBlock() {
document.getElementById('insert').innerHTML = '';
var n = document.getElementById('n').value;
if (!(n = parseInt(n))) return false;
for (var i = 0; i < n; ++i) {
var el = document.createElement('div');
document.getElementById('insert').appendChild(el);
el.className = 'block';
el.setAttribute('list_id', i + 1);
el.innerHTML = i + 1;
}
return true;
}
</script>
<style>
.block {
width: 50px;
height: 50px;
background: red;
margin: 5px;
}
</style>
</body>
</html>
Я вам сделал медвежью услугу. В следующий раз задавайте вопрос по какой-то конкретной части, а не просите код написать |
JSN,
может [HTML run][/HTML]? |
Простите, поправил.
А это такая сложная и интересная задача, чтобы ее смотреть? |
JSN,
удобно и можно видеть результат, по коду строки 17 и 20 лучше поменять 2 раза изменяется страница -- в DocumentFragment бы сначала все дивы -- а потом бы уже на страницу http://learn.javascript.ru/multi-insert |
Спасибо за статью, не задумывался об этом раньше
|
| Часовой пояс GMT +3, время: 02:56. |