Javascript-форум - помогите исправить функцию добавления

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - помогите исправить функцию добавления (https://javascript.ru/forum/misc/43276-pomogite-ispravit-funkciyu-dobavleniya.html)

помогите исправить функцию добавления

Описание: в поле ввода задаем цвет(например,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>

Yuras,
1) вместо

p.innerHTML = b;

запишите

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

ибо у вас b - это элемент
2) не думаю что у вас функция удаления работает
3) цикл после объявления переменных вам зачем?

Внутрь p нельзя добавлять другие p или блочные элементы... правильно? а я в программе походу добавляю div в p....

1) не соображу как(
2)объекты, которые нынче создаются - она прибивает
3)перемудрил, работает без цикла удаление.

<!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>

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