ปัญหาอะไรเอ่ย DomReplace ?
DomCreate ด้
DomDelete ได้
DomReplace ได้
แต่เมื่อสมมุติว่า
กำหนดให้ DomReplace ใน ID ที่ 3
จะลบตั้งแต่ท้ายสุดมาจนถึง ID ที่ 4
ก็จะไม่สามารถลบได้ฮ่ะ
ถ้า DomReplace ใน ID สุดท้าย
ID ก่อนหน้านั้นจะสามารถลบได้
แต่ ID ที่ถูก DomReplace ไม่สามารถลบได้
เลยเอาโค้ดมาให้จับผิดดูฮ่ะ
function DomCreate(text){
var Parent=document.createElement('div');
var TextNode=document.createTextNode(text);
var ListNode=document.getElementsByTagName('div').length;
ListNode++;
Parent.setAttribute('id',ListNode);
Parent.appendChild(TextNode);
document.documentElement.lastChild.appendChild(Parent);
}
function DomDelete(){
var ListNode=document.getElementsByTagName('div').length;
var Parent=document.getElementById(ListNode);
if(ListNode>0){
document.documentElement.lastChild.removeChild(Parent);
}
}
function DomReplace(id,text){
var Parent=document.documentElement.lastChild;
var OldNode=document.getElementById(id);
var NewNode=document.createTextNode(text);
Parent.replaceChild(NewNode,OldNode);
document.documentElement.lastChild.appendChild(Parent);
}
DomDelete ได้
DomReplace ได้
แต่เมื่อสมมุติว่า
กำหนดให้ DomReplace ใน ID ที่ 3
จะลบตั้งแต่ท้ายสุดมาจนถึง ID ที่ 4
ก็จะไม่สามารถลบได้ฮ่ะ
ถ้า DomReplace ใน ID สุดท้าย
ID ก่อนหน้านั้นจะสามารถลบได้
แต่ ID ที่ถูก DomReplace ไม่สามารถลบได้
เลยเอาโค้ดมาให้จับผิดดูฮ่ะ
function DomCreate(text){
var Parent=document.createElement('div');
var TextNode=document.createTextNode(text);
var ListNode=document.getElementsByTagName('div').length;
ListNode++;
Parent.setAttribute('id',ListNode);
Parent.appendChild(TextNode);
document.documentElement.lastChild.appendChild(Parent);
}
function DomDelete(){
var ListNode=document.getElementsByTagName('div').length;
var Parent=document.getElementById(ListNode);
if(ListNode>0){
document.documentElement.lastChild.removeChild(Parent);
}
}
function DomReplace(id,text){
var Parent=document.documentElement.lastChild;
var OldNode=document.getElementById(id);
var NewNode=document.createTextNode(text);
Parent.replaceChild(NewNode,OldNode);
document.documentElement.lastChild.appendChild(Parent);
}
ที่เหลือ หาเอาเอง ตอบได้แล้วบอกด้วย
"ไม่รู้ว่าลบยังไงนะ แต่การลบ element ต้องลบ element หลังสุด มา element แรก"
-------------------------------------------
ไม่มีอะไรซับซ้อนครับ
เรียกฟังชั่นให่ทำงานแบบตรงไปตรงมาเลย
ขออธิบายนิดนึง:
ในการสร้าง element ผมทำการนับนำนวน element ในปัจจุบัน
แล้วบวกกับ 1 เพื่อกำหนดเป็น id ของตัวที่จะสร้างขึ้นมาใหม่
การแทนที่ก็อ้างอิงถึง id เพื่อให้แทนที่ได้ถูกจุด
ส่วนการลบ element นั้นก็คล้ายๆ กับตอนสร้างใหม่ครับ
เป็นการลบโดยอ้างถึง id
คือการนับจำนวน element ทั้งหมด
แล้ว id ตัวสุดท้ายจะเท่ากับจำนวนที่นับได้
แล้วจึงลบ element ตัวนั้นออก
ด้วยความสงสัยแต่ยัง 'งม' ไม่เจอ
ก่อนหน้านี้ผมลอง setAttribute('id',เป็น id ตัวเดียวกันกับที่ส่งมาแก้ไข);
ก็ยังไม่เป็นผล
ตอนนี้ก็เลยยกมือไม่ไว้วางใจ function DomReplace ไปพลางๆ
แล้วท่านใดที่วิเคราะห์ดูข้อสมมุติฐานที่ผมโพสไว้ด้านบน
แล้วไปจ๊ะเอ๋เข้า ก็ขอรบกวนด้วยครับ
ขอขอบคุณความกรุณาของคุณอา gOragod อย่างสูงครับ
หน้าเว็บทีกำลังทำงานอยู่ก็ได้
มีตัวอย่าง การพิจารณาก็ง่ายขึ้น
บางครั้งฟังก์ชั่นก็ถูก เพียงแต่ออกแบบเพจไม่สัมพันธ์กับฟังก์ชั่นเท่านั้น
เปรียวทำ TEST ที localhost น่ะฮ่ะ
กะว่าถ้าทำผ่านแล้วแก้ปัญหาเสร็จ
เก็บเป็นไฟล์ .js ไว้เรียกใช้อีกที
ส่วนโค้ดที่นอกเหนือจากที่เปรียว
โพสไว้ด้านบนก็มีเพียงแค่ input
button 3 ตัว ที่เอาไว้เรียกฟังชั่น
เฉยๆ
<input type="button" onclick="DomCreate('test TEXT NODE')" value="สร้าง Element ใหม่">
<input type="button" onclick="DomReplace('3','test Replace TEXT NODE')" value="แทนที่ข้อมูลใหม่ใน id ที่ 3">
<input type="button" onclick="DomDelete()" value="ลบ Element ออก">
แล้วตัวอย่างเปรียวอัพไว้ให้คุณอาดูแล้วที่
http://krajay.thport.com/
ขอรบกวนอีครั้งนะฮ่ะ
ความผิดพลาดจะอยู่ที่ DomReplace ครับ เรื่องของเรื่องคือ มัน replace เอา div ออกไปทั้งอันเลย ผลก็คือ id ที่ 3 หายไปเมื่อ replace เลย error
ในความเป็นจริงผมไม่รู้ว่า ในตอนใช้งาน จะมีอะไรอยู่ใน div นะครับ แต่ดูจากโค้ด เห็น DomReplace มี createTextNode ผมก็เลยสรุปเอาว่า คงเปลี่ยนข้อความ ภายใน id นั้นๆ
จากข้อสรุปด้านบน ฟังก์ชั่น DomReplace ให้เปลี่ยนเป็น
function DomReplace(id,text){
document.getElementById(id).innerHTML = text;
}
แค่นี้ก็พอแล้วครับ
ใน case นี้ ค่า text ที่ส่งเข้าไป สามารถเป็น HTML ได้ด้วยนะครับ ไม่ได้จำกัดแค่ข้อความ
เอา JavaScript ดุ้นๆ อย่างนี้ประหยัดและง่ายดี
แต่ในเชิงความรู้เปรียวอยากรู้เพื่อประดับสมองไว้น่ะฮ่ะ If
จะใช้งาน replaceChild( ' ',' ' ); ให้ได้ผลเนี่ยต้องปรับแก้ยังไง
เห็นว่า มัน replace แล้ว id ที่ 3 มันหายไปเลย ก็อย่างที่
เปรียวเคยเรียนให้ทราบว่า
ก่อนหน้านี้ลอง setAttribute('id',เป็น id ตัวเดียวกันกับที่ส่งมาแก้ไข);
ก็ยังไม่เป็นผล
ประดับความรู้เฉยๆ ฮ่ะ เพราะจะเปลี่ยนมาใช้วิธีที่ #5 เลย
ขอขอบคุณความกรุณาของคุณอา gOragod อย่างสูงเลยฮ่ะ
ความรู้เน่นจริงๆ
ผมคงอธิบายทั้งหมดไม่ได้ เนื่องจากเรื่องมันคงยาว และซับซ้อน ถ้ามีโอกาศ ผมจะพยายามเขียนเป็นบทความครับ เพราะคงต้องอธิบายกันตั้งแต่เรื่อง DOM
ไม่ได้ต้องการละเอียดหรอกฮ่ะเอาคร่าวๆ สัก 3-4 ประโยค
ก็น่าจะมองเห็นภาพ(เป็นซีเปีย+เบลอๆ)แล้ว
แต่สงสัยจะอธิบายแบบรวบรัดให้เข้าใจยากจริงๆ
ยังไงก็ แทง ยู มิดด้าม นะครับ
------------------
แทง=Thank
ยู=You
มิดด้าม=สุดๆ
------------------