Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.11.2013, 14:32
Новичок на форуме
Отправить личное сообщение для Yuras Посмотреть профиль Найти все сообщения от Yuras
 
Регистрация: 18.11.2013
Сообщений: 9

помогите исправить функцию добавления
Описание: в поле ввода задаем цвет(например,red). формируется квадрат 50*50, красного цвета и кнопка удаления для него. При нажатие на кнопку add - я должен добавить еще элемент (например, зеленый квадрат) и т.д. Сейчас при добавлении создается [object HTMLDivElement], а не квадрат с заданным цветом, помогите это исправить, пожалуйста. Функция удаления работает.
<!DOCTYPE html>
<html>
<head>
<title align = "center"> Палитра цветов</title>
<style>
ul
{
margin:0;
padding:0;
}
</style>
</head>
<body>
<input type="text" id="input" onkeyup="doIt()"/>
<button onclick="addElem()">add</button>
<div id='kvadrat'>
</div>




<script type="text/javascript">
var div, b, yo,element;
var div=document.getElementById("kvadrat");
var buts=div.getElementsByTagName("button");
for (var i=0 in buts)
buts[i].onclick=delElem;

function addElem()
{
var p=document.createElement("p");
//var p=b;
p.innerHTML = b;
div.appendChild(p);
var but=document.createElement("button");
p.appendChild(but);
but.innerHTML="x";
but.onclick=delElem;
}


function doIt()
{
b = document.getElementById('kvadrat');
b.style.background = input.value;
b.style.width = '50px';
b.style.height = '50px';
}

function delElem()
{
e=window.event;
element=e.srcElement.parentNode;
div.removeChild(element);

}


</script>

</body>
Ответить с цитированием
  #2 (permalink)  
Старый 29.11.2013, 15:00
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

Yuras,
1) вместо
p.innerHTML = b;

запишите
p.innerHTML = "значение";

ибо у вас b - это элемент
2) не думаю что у вас функция удаления работает
3) цикл после объявления переменных вам зачем?
Ответить с цитированием
  #3 (permalink)  
Старый 29.11.2013, 15:00
Новичок на форуме
Отправить личное сообщение для Yuras Посмотреть профиль Найти все сообщения от Yuras
 
Регистрация: 18.11.2013
Сообщений: 9

Внутрь p нельзя добавлять другие p или блочные элементы... правильно? а я в программе походу добавляю div в p....
Ответить с цитированием
  #4 (permalink)  
Старый 29.11.2013, 15:10
Новичок на форуме
Отправить личное сообщение для Yuras Посмотреть профиль Найти все сообщения от Yuras
 
Регистрация: 18.11.2013
Сообщений: 9

1) не соображу как(
2)объекты, которые нынче создаются - она прибивает
3)перемудрил, работает без цикла удаление.
Ответить с цитированием
  #5 (permalink)  
Старый 29.11.2013, 15:18
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

<!DOCTYPE html>
<html>
<head>
<title align = "center"> Палитра цветов</title>
    <style>
		 ul 
		    {
			margin:0;
			padding:0;
			}
    </style>
</head>
<body>
	<input type="text" id="input" onkeyup="doIt()"/>
	<button onclick="addElem()">add</button>
	<div id='kvadrat'>
	</div>


	
 
  	<script type="text/javascript">	
		var div, b, yo,element, j = 0;
		var div=document.getElementById("kvadrat");
		var buts=div.getElementsByTagName("button");
            /*for (var i=0 in buts)
            buts[i].onclick=delElem; данный цикл впринципе не работоспособный, иначе бы у вас никогда не вызвалась бы функция addElem()*/
		
		function addElem()
			{
				var p=document.createElement("p");
				//var p=b;
				p.innerHTML = "Квадрат №"+(j+1);
				var but=document.createElement("button");
				but.innerHTML="x";
				but.onclick= function() { delElem(p); };
				p.appendChild(but);
				div.appendChild(p);
				j++;
			}
		
		
		function doIt()
			{
				b = document.getElementById('kvadrat');
				b.style.background = input.value;
				b.style.width = '50px'; // не имеет смысла
				b.style.height = '50px'; // каждый раз задавать одни и те же значения
			}
		
		function delElem(el)
			{
				/*e=window.event;
				element=e.srcElement.parentNode;
				 div.removeChild(element);*/
				div.removeChild(el);
        }
	
	
	</script>
	
</body>

Последний раз редактировалось lord2kim, 29.11.2013 в 15:21.
Ответить с цитированием
  #6 (permalink)  
Старый 29.11.2013, 15:45
Новичок на форуме
Отправить личное сообщение для Yuras Посмотреть профиль Найти все сообщения от Yuras
 
Регистрация: 18.11.2013
Сообщений: 9

Спасибо за помощь и объяснения. разобрался.
p.style.background = b.style.background; - добавил строку и квадраты полезли цветные
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите подключить функцию в onclick moloko Элементы интерфейса 10 30.07.2013 08:27
Помогите исправить код bytzz Элементы интерфейса 1 02.11.2012 23:45
Помогите написать числовую функцию leny Общие вопросы Javascript 69 01.08.2012 15:26
Помогите исправить функцию поиска слова opeen_door Общие вопросы Javascript 3 31.10.2011 21:44
Помогите исправить ошибки в лабораторных работах по информатике muzhik65 Общие вопросы Javascript 18 06.05.2011 13:39