Javascript-форум - Почему не работает второй Event?

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

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Почему не работает второй Event? (https://javascript.ru/forum/events/32355-pochemu-ne-rabotaet-vtorojj-event.html)

Почему не работает второй Event?

Подскажите, почему не работает Event??????
Еvent указан в коде в комментарии.

<html>
<head>
<title></title>
</head>
<body>
<script>
function ButtonAnzeigen(strId, zIndexAngabe, strPosition){
this.strId = strId;
this.zIndexAngabe = zIndexAngabe;
this.strPosition = strPosition;
a = document.createElement("button");
a.style.zIndex = zIndexAngabe;
a.innerHTML = "Analyse";
a.style.right = 0;
a.style.bottom = 0;
a.style.color = "rgb(0,100,100)";
a.style.position = strPosition;
a.id = strId;
document.body.appendChild(a);
}
function TextZerlegen(){
m = document.createElement("div");
document.body.appendChild(m);
m.id = "div";
v = document.getElementById("iA").value;
c = new Array();
for(x = 0; x < v.length; x++){
c[x] = document.createElement("span");
m.appendChild(c[x]);
c[x].innerHTML = v[x];
c[x].id = "span"+x;
}
m.style.position = "absolute";
m.style.top = 100;
m.style.fontSize = 50;
m.style.fontFamily = "Calibri";
}
function InputArea_Anzeigen(str_idAngabe, strPositionAngabe, zIndexAngabe){
this.strPositionAngabe = strPositionAngabe;
this.str_idAngabe = str_idAngabe;
this.zIndexAngabe = zIndexAngabe;
document.body.style.backgroundColor = "#f3f3f3";
v = document.createElement("input");
v.id = str_idAngabe;
v.style.position = strPositionAngabe;
v.style.zIndex = zIndexAngabe;
v.style.color = "rgb(255,255,255)";
v.style.backgroundColor = "rgb(0,0,150)";
v.style.left = 0;
v.style.top = 0;
v.style.fontSize = 50;
v.style.textShadow = "red 0 0 1px, red 5px 5px 3px";
v.style.width = window.innerWidth;
document.body.appendChild(v);
}

// Anwendungsblock

var iA = new InputArea_Anzeigen("iA", "absolute", 0);
var b = new ButtonAnzeigen("b", 20, "absolute");

a.onclick = function(){
TextZerlegen();
};

// Почуму он не работает???????????????
document.getElementById("span1").onclick = function(){

alert("welcome");

};

</script>
</body>

</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Example</title>
</head>
<body>
<script type="text/javascript">
	function setElement(element) {
		return document.createElement(element);
	}
	function getElement(element) {
		return document.getElementById(element);
	}
	function append(element1,bool,element2) {
		bool=bool || false;
		if(!bool) {
			return document.body.appendChild(element1);
		} else {
			return element1.appendChild(element2);
		}
	}
	var div=setElement('div');
		div.id='div';
		append(div);
	var button=setElement('button');
		button.innerHTML='Click';
		append(div,true,button);
	var i=0;
		button.onclick=function() {
		var span=setElement('span');
			span.id='span'+i;
			span.innerHTML='Text span'+i;
			span.onclick=function() {
				alert(this.id);
			};
			append(div,true,span);
		++i;
		}
</script>
</body>
</html>

JavaScriptProgrammer, а как бы вы хотели чтобы это работало?

// Почуму он не работает???????????????
document.getElementById("span1").onclick = function(){

alert("welcome");

};

span1 не существует на момент вызова данных строк

Почему не работает второй Event? Ответ.

Почему span1 не существует? В FireDebug в BODY существует. Я объявлял в функции глобальный массив переменных. Этот глобальный массив переменных, что пропадает, после того как функция себя выполнила?. Или я чего-то не так понимаю? Объясните пожалуйста.

function TextZerlegen(){
m = document.createElement("div");
document.body.appendChild(m);
m.id = "div";
v = document.getElementById("iA").value;

// объявлен глобально, без var
c = new Array();
for(x = 0; x < v.length; x++){
c[x] = document.createElement("span");
m.appendChild(c[x]);
c[x].innerHTML = v[x];
c[x].id = "span"+x;
}
m.style.position = "absolute";
m.style.top = 100;
m.style.fontSize = 50;
m.style.fontFamily = "Calibri";
}

// Почуму он не работает???????????????
document.getElementById("span1").onclick = function(){

alert("welcome");

};

Почему Вы в event onclick кнопки вкладываете еvent onclick span????????
Почему второй onclick надо вкладывать в onclick кнопки??????????
Почему второй onclick не работает если его не вкладывать??????

button.onclick=function() {
31
        var span=setElement('span');
32
            span.id='span'+i;
33
            span.innerHTML='Text span'+i;
34
            span.onclick=function() {
35
                alert(this.id);
36
            };

Цитата:

Сообщение от JavaScriptProgrammer (Сообщение 209900)

объявлен то он объявлен...но он пустой...и пока функция не выполнится ничего не произойдет, т.е. никаких элементов создано не будет...
я не знаю когда вы его наблюдаете "В FireDebug в BODY"...но до вызова функции TextZerlegen() никаких span+x не появится

Цитата:

Сообщение от JavaScriptProgrammer (Сообщение 209902)

button.onclick=function() {
31
        var span=setElement('span');
32
            span.id='span'+i;
33
            span.innerHTML='Text span'+i;
34
            span.onclick=function() {
35
                alert(this.id);
36
            };

1. здесь к создаваемому элементу типа кнопка добавляется обработчик события нажатия мыши...в этом обработчике создается, а патом добавляется span к div, если он существует, или, в ином случае, к body; к span добавляется отдельный обработчик клика мыши

2. второй onclick относится уже к создаваемому span

3. можете потом отдельно добавить данное событие к созданным элементам

Для примера показано.
Так как если будет так называемая запись, чтобы после обновления страницы все оставалось на местах, то тут нужно будет создать и заполнять массив, где после его разбирать и указывать события.