Mengedit Elemen Individual dengan JavaScript

Sekarang kita akan belajar mengedit teks elemen menggunakan bidang input. Mari mulai dengan hal-hal sederhana dan secara bertahap meningkat dalam kompleksitas.

Jadi, misalkan kita diberikan sebuah paragraf dan input, yang ditempatkan pada induk yang sama:

<div id="parent">
	<p id="elem">teks</p>
	<input id="input">
</div>

Mari kita buat agar ketika kehilangan fokus pada input, teksnya muncul di paragraf:

let elem = document.querySelector('#elem');
let input = document.querySelector('#input');

input.addEventListener('blur', function() {
	elem.textContent = this.value;
});

Sekarang mari kita buat agar saat halaman dimuat, input sudah berisi teks dari paragraf. Dengan demikian, kita dapat menggunakan input untuk mengedit teks yang terletak di paragraf.

Mari implementasikan:

let elem = document.querySelector('#elem');
let input = document.querySelector('#input');

input.value = elem.textContent; // menulis teks paragraf ke input

input.addEventListener('blur', function() {
	elem.textContent = this.value;
});

Modifikasi kode di atas sehingga teks paragraf berubah bukan saat kehilangan fokus, tetapi saat teks dimasukkan ke dalam input.

Kemunculan Input

Sekarang mari kita buat agar input awalnya tidak ada di halaman, dan muncul saat paragraf diklik. Artinya, HTML awal kami akan terlihat seperti ini:

<div id="parent">
	<p id="elem">teks</p>
</div>

Pertama, mari implementasikan kemunculan input saja, tanpa pengeditan:

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

elem.addEventListener('click', function() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	elem.parentElement.appendChild(input);
});

Dan sekarang mari kita buat agar saat kehilangan fokus pada input, teks paragraf berubah:

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

elem.addEventListener('click', function() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	input.addEventListener('blur', function() {
		elem.textContent = this.value;
	});
	
	elem.parentElement.appendChild(input);
});

Namun, kode kami tidak sempurna, karena setiap klik pada paragraf akan menyebabkan munculnya input baru.

Untuk menyelesaikan masalah ini, hapus saja input saat ini setelah kehilangan fokus:

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

elem.addEventListener('click', function() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	input.addEventListener('blur', function() {
		elem.textContent = this.value;
		this.remove(); // hapus input
	});
	
	elem.parentElement.appendChild(input);
});

Secara mandiri, tanpa melihat kode saya, selesaikan masalah yang dijelaskan.