Хатоги такрори функсияи вироиши унсурҳои DOM дар JavaScript

Фарз мекунем, ки мо як рӯйхати муайян дорем:

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

Худ рӯйхат ва бандҳои онро дар тағирёбандаҳои ҷудогона мегирем:

let ul    = document.querySelector('ul');
let lis   = document.querySelectorAll('li');

Чунон кунем, ки бандҳои рӯйхати мо тавассути як input пайдошаванда вироишпазир карда шаванд:

for (let li of lis) {
	li.addEventListener('click', function func() {
		let input = document.createElement('input');
		input.value = li.textContent;
		
		li.textContent = '';
		li.append(input);
		
		input.addEventListener('blur', function() {
			li.textContent = this.value;
			li.addEventListener('click', func);
		});
		
		li.removeEventListener('click', func);
	});
}

Акнун фарз мекунем, ки мо мехоҳем, ки ба рӯйхат бандҳои нав илова карда тавонам. Барои ин зери рӯйхат як input-и мувофиқ дошта бошем:

<input id="adder">

Истинод ба ин input-ро дар як тағирёбанда мегирем:

let adder = document.querySelector('#adder');

Чунон кунем, ки бо аз даст додани фокуси input ба рӯйхат як банди нав бо матне, ки аз input-и мо гирифта шудааст, илова карда шавад:

adder.addEventListener('blur', function() {
	let li = document.createElement('li');
	li.textContent = this.value;
	
	ul.append(li);
});

Акнун фарз мекунем, ки мо мехоҳем, ки бандҳои нав иловашуда низ вироишпазир карда шаванд. Ба худӣ барои онҳо вироиш кор нахоҳад кард, зеро вақте ки мо барои бандҳои рӯйхат коргузори клик насб кардем, ин бандҳо то ҳол вуҷуд надоштанд.

Биёед ба вариантҳои мумкини ҳалли ин мушкилот нигарем.

Ҳалли якум

Содатарин ҳал - ин такрори рамзи функсияи func мебошад, ки барои бандҳои навсозӣшуда ҳам пайваст карда шавад:

adder.addEventListener('blur', function() {
	let li = document.createElement('li');
	li.textContent = this.value;
	
	li.addEventListener('click', function func() {
		// дар ин ҷо мо рамзро такрор мекунем
	});
	
	ul.append(li);
});

Албатта, дар ин ҳал мо дуруст ногузорашӣ мебинем - такрори рамз дуруст нест.

Ҳалли дуюм

Барои ҳалли мушкили такрори рамз мантиқӣ аст, ки функсияи func-ро берун аз цикл бароред ва онро ҳамчун Function Declaration созед:

function func() {
	let input = document.createElement('input');
	input.value = li.textContent;
	
	li.textContent = '';
	li.append(input);
	
	input.addEventListener('blur', function() {
		li.textContent = this.value;
		li.addEventListener('click', func);
	});
	
	li.removeEventListener('click', func);
}

Дар ин ҷост, ки мушкилиёт дар интизори мост. Масъала он аст, ки функсияи мо аз тағирёбандаи li, ки аз соҳаи намоёнии берунӣ гирифта шуда буд, истифода мекард. Аммо пас аз берун овардани функсия ин тағирёбанда дигар намоён нест!

Барои ҳалли мушкил, мо li-ро ҳамчун параметр мефиристем:

function func(li) {
	let input = document.createElement('input');
	input.value = li.textContent;
	
	li.textContent = '';
	li.append(input);
	
	input.addEventListener('blur', function() {
		li.textContent = this.value;
		li.addEventListener('click', func);
	});
	
	li.removeEventListener('click', func);
}

Ва дар ин ҷо ҳалли мо мушкили дигареро ба вучуд меорад. Масъала он аст, ки параметрро ба осонӣ ба коргузори воқеа дода наметавон кард:

for (let li of lis) {
	li.addEventListener('click', func(li)); // кор намекунад!
}

Барои ҳалли ин мушкил, мо функсияи худро дар дохили як коргузори беном фақат даъват мекунем:

for (let li of lis) {
	li.addEventListener('click', function() {
		func(li);
	});
}

Ва ба ҳамин монанд ҳангоми эҷоди банди нави рӯйхат рафтор мекунем:

adder.addEventListener('blur', function() {
	let li = document.createElement('li');
	li.textContent = this.value;
	
	li.addEventListener('click', function() {
		func(li);
	});
	
	ul.append(li);
});

Ҳалли сеюм

Ҳали зеботаре мавҷуд аст. Шумо метавонед фақат аз делегатсияи воқеаҳо истифода баред. Дар ин сурат мушкили бо бандҳои нави рӯйхат танҳо ба вуҷуд нахоҳад омад:

ul.addEventListener('click', function(event) {
	if (event.target.tagName === 'LI') { // клик ба рӯи li-ро мегирем, на ба рӯи input
		let li = event.target;
		
		let input = document.createElement('input');
		input.value = li.textContent;
		
		li.textContent = '';
		li.append(input);
		
		input.addEventListener('blur', function() {
			li.textContent = this.value;
		});
	}
});

Дар ин сурат давр задани бандҳои рӯйхат ба умумӣ ба мо лозим нахоҳад буд, ва рамз барои эҷоди банди нави рӯйхат то ин шакл коҳиш меёбад:

adder.addEventListener('blur', function() {
	let li = document.createElement('li');
	li.textContent = this.value;
	ul.append(li);
});