การแก้ไของค์ประกอบแต่ละรายการด้วย JavaScript

ตอนนี้เราจะเรียนรู้วิธีการแก้ไขข้อความขององค์ประกอบโดยใช้ช่องป้อนข้อมูล เริ่มจากสิ่งง่าย ๆ และค่อย ๆ ทำให้ซับซ้อนขึ้น

ดังนั้น ให้เรามีย่อหน้าและอินพุต ซึ่งอยู่ในพาเรนต์เดียวกัน:

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

มาทำให้เมื่ออินพุตเสียโฟกัส ข้อความของมันจะปรากฏในย่อหน้ากัน:

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

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

ตอนนี้มาทำให้เมื่อเข้าหน้าเว็บ ข้อความของย่อหน้าอยู่ในอินพุตแล้ว ด้วยวิธีนี้เราจะสามารถแก้ไขข้อความที่อยู่ในย่อหน้าโดยใช้อินพุตได้

มาเขียนโค้ดกัน:

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

input.value = elem.textContent; // เขียนข้อความของย่อหน้าลงในอินพุต

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

แก้ไขโค้ดด้านบน เพื่อให้ข้อความของย่อหน้าเปลี่ยนไม่ใช่เมื่อเสียโฟกัส แต่เมื่อมีการป้อนข้อความลงในอินพุต

การปรากฏของอินพุต

ตอนนี้มาทำให้ในตอนแรกไม่มีอินพุตบนหน้าเว็บ แต่จะปรากฏขึ้นเมื่อคลิกที่ย่อหน้า นั่นคือ HTML เริ่มต้นของเราจะเป็นดังนี้:

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

เริ่มต้นมาเขียนโค้ดการปรากฏของอินพุตกันก่อน โดยยังไม่มีการแก้ไข:

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

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

และตอนนี้มาทำให้เมื่ออินพุตเสียโฟกัส ข้อความของย่อหน้าจะเปลี่ยน:

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);
});

อย่างไรก็ตามโค้ดของเราไม่สมบูรณ์ เพราะการคลิกที่ย่อหน้าทุกครั้งจะทำให้มีอินพุตใหม่ปรากฏขึ้น

เพื่อแก้ไขปัญหา เราจะลบอินพุตปัจจุบันเมื่อเสียโฟกัส:

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(); // ลบอินพุต
	});
	
	elem.parentElement.appendChild(input);
});

แก้ไขปัญหาที่อธิบายไว้ด้วยตัวเอง โดยไม่แอบดูโค้ดของฉัน