Форум

Noga_programmista · #1 (**permalink**) 29.03.2018, 21:35

Есть div в нём вложено ещё 3 div'a . Нужно чтобы после клика по одному из вложенных div'ов выводилось куда-нибудь ( в тот же alert ) его содержимое например...
написал что-то типо

<div id="id4">
				<div class="class1" style="margin-left:25%  "> 1 </div>
				<div class="class1">2 </div>
				<div class="class1" style="margin-right:10% " > 3</div>
</div>

и в window.onload = function () {}

var e = document.getElementById("id4");
	
	for(var i =0; i < e.childNodes.length; i ++){
		if(e.childNodes[i].nodeType == 1){
			e.childNodes[i].onclick = function(){
				//e.childNodes[i].innerHTML = "white"; (*) 
				alert("работает !!!");
			};
		}
	}

ВОПРОС 1 )
Объясните почему не работает строка (*) ... все перепробовал(
и подскажите как это сделать-то....

ВОПРОС 2)
Кажется (так оно и есть наверное) цикл можно было написать человеческий, типо обратиться к первым детям, а не проверять... МБ что-то путаю или недопонимаю, можете подсказать?(

Заранее Спасибо!!!

Malleys · #2 (**permalink**) 29.03.2018, 22:28

ОТВЕТ 1) К тому моменту, когда вызывается функция, назначенная onclick, переменная i всегда равна e.childNodes.length

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="id4">
		<div class="class1">1</div>
		<div class="class1">2</div>
		<div class="class1">3</div>
	</div>
	<script>

		var e = document.getElementById("id4");
		
		for(var i = 0; i < e.childNodes.length; i++){
			if(e.childNodes[i].nodeType == 1){
				e.childNodes[i].onclick = (function(el) {
					return function() {
						el.innerHTML += " *";
						//alert("работает !!!");
					};
				})(e.childNodes[i]);
			}
		}

	</script>
	<style>body{font-size:300%;}.class1{background:gold;margin:1em auto;padding:1em;text-align:center;cursor:pointer;}</style>
</body>
</html>

ОТВЕТ 2) Человеческий цикл очень субъективен!!!

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="id4">
		<div class="class1">1</div>
		<div class="class1">2</div>
		<div class="class1">3</div>
	</div>
	<script>

		document.getElementById("id4").addEventListener("click", function(event) {
			if(!event.target.matches(".class1")) return;

			event.target.textContent += " *";
		});

	</script>
	<style>body{font-size:300%;}.class1{background:gold;margin:1em auto;padding:1em;text-align:center;cursor:pointer;}</style>
</body>
</html>

P. S. Ещё можно так

for(let element of document.querySelectorAll("#id4 .class1")) {}

рони · #3 (**permalink**) 29.03.2018, 22:31

Сообщение от Noga_programmista

Объясните почему не работает строка (*)

потому что i на момент клика уже равно e.childNodes.length -- а таких e.childNodes[i] элементов нет .
можно так

this.innerHTML = "white";

можно так
#коллекции-не-массивы

[].forEach.call

можно так
замыкания

Noga_programmista · #4 (**permalink**) 29.03.2018, 22:42

Блин, точно.. только сделал чтобы он выводил номер свой , разобрался в замыкании! а вот что оно тут вылезет, даже не подумал. Спасибо всем))

Форум

Справочник

Discord чат

Курсы javascript