A-AA+then

ปัญหาอะไรเอ่ย DomReplace ?

1,482
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);
}

8 ความคิดเห็น

ไม่รู้ว่าลบยังไงนะ แต่การลบ element ต้องลบ element หลังสุด มา element แรก

ที่เหลือ หาเอาเอง ตอบได้แล้วบอกด้วย
1

"ไม่รู้ว่าลบยังไงนะ แต่การลบ element ต้องลบ element หลังสุด มา element แรก"
-------------------------------------------
ไม่มีอะไรซับซ้อนครับ
เรียกฟังชั่นให่ทำงานแบบตรงไปตรงมาเลย

ขออธิบายนิดนึง:

ในการสร้าง element ผมทำการนับนำนวน element ในปัจจุบัน
แล้วบวกกับ 1 เพื่อกำหนดเป็น id ของตัวที่จะสร้างขึ้นมาใหม่

การแทนที่ก็อ้างอิงถึง id เพื่อให้แทนที่ได้ถูกจุด

ส่วนการลบ element นั้นก็คล้ายๆ กับตอนสร้างใหม่ครับ
เป็นการลบโดยอ้างถึง id
คือการนับจำนวน element ทั้งหมด
แล้ว id ตัวสุดท้ายจะเท่ากับจำนวนที่นับได้
แล้วจึงลบ element ตัวนั้นออก


ด้วยความสงสัยแต่ยัง 'งม' ไม่เจอ
ก่อนหน้านี้ผมลอง setAttribute('id',เป็น id ตัวเดียวกันกับที่ส่งมาแก้ไข);
ก็ยังไม่เป็นผล
ตอนนี้ก็เลยยกมือไม่ไว้วางใจ function DomReplace ไปพลางๆ

แล้วท่านใดที่วิเคราะห์ดูข้อสมมุติฐานที่ผมโพสไว้ด้านบน
แล้วไปจ๊ะเอ๋เข้า ก็ขอรบกวนด้วยครับ


ขอขอบคุณความกรุณาของคุณอา gOragod อย่างสูงครับ
 

2

มีตัวอย่างมั้ย

หน้าเว็บทีกำลังทำงานอยู่ก็ได้

มีตัวอย่าง การพิจารณาก็ง่ายขึ้น

บางครั้งฟังก์ชั่นก็ถูก เพียงแต่ออกแบบเพจไม่สัมพันธ์กับฟังก์ชั่นเท่านั้น
3

เปรียวทำ 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/

ขอรบกวนอีครั้งนะฮ่ะ

4

ผมแนะนำให้ใช้ firefox และ ติดตั้ง firebug นะครับ จะสามารถตรวจสอบได้

ความผิดพลาดจะอยู่ที่ DomReplace ครับ เรื่องของเรื่องคือ มัน replace เอา div ออกไปทั้งอันเลย ผลก็คือ id ที่ 3 หายไปเมื่อ replace เลย error

ในความเป็นจริงผมไม่รู้ว่า ในตอนใช้งาน จะมีอะไรอยู่ใน div นะครับ แต่ดูจากโค้ด เห็น DomReplace มี createTextNode ผมก็เลยสรุปเอาว่า คงเปลี่ยนข้อความ ภายใน id นั้นๆ

จากข้อสรุปด้านบน ฟังก์ชั่น DomReplace ให้เปลี่ยนเป็น

function DomReplace(id,text){
  document.getElementById(id).innerHTML = text;
}


แค่นี้ก็พอแล้วครับ

ใน case นี้ ค่า text ที่ส่งเข้าไป สามารถเป็น HTML ได้ด้วยนะครับ ไม่ได้จำกัดแค่ข้อความ
5

แก้ตรงที่คุณอา gOragod บอกแล้วหายเป็นปลิดทิ้งเลยฮะ
เอา JavaScript ดุ้นๆ อย่างนี้ประหยัดและง่ายดี
แต่ในเชิงความรู้เปรียวอยากรู้เพื่อประดับสมองไว้น่ะฮ่ะ If
จะใช้งาน replaceChild( '  ','  ' ); ให้ได้ผลเนี่ยต้องปรับแก้ยังไง
เห็นว่า มัน replace แล้ว id ที่ 3 มันหายไปเลย ก็อย่างที่
เปรียวเคยเรียนให้ทราบว่า
ก่อนหน้านี้ลอง setAttribute('id',เป็น id ตัวเดียวกันกับที่ส่งมาแก้ไข);
ก็ยังไม่เป็นผล

ประดับความรู้เฉยๆ ฮ่ะ เพราะจะเปลี่ยนมาใช้วิธีที่ #5 เลย

ขอขอบคุณความกรุณาของคุณอา gOragod อย่างสูงเลยฮ่ะ
ความรู้เน่นจริงๆ
6

มันผิดตั้งแต่แนวคิดแล้วครับ ถ้าจะแทนที่ Element โค้ดนี้ก็ใช้งานไม่ได้อยู่ดี เราต้องไปตรวจสอบ DOM ก่อน แล้วค่อยเขียนฟังก์ชั่นให้ถูกต้องครับ ง่ายๆเลยคือต้องมีเครื่องมือ ซึ่งก็คือ firefox ครับ

ผมคงอธิบายทั้งหมดไม่ได้ เนื่องจากเรื่องมันคงยาว และซับซ้อน ถ้ามีโอกาศ ผมจะพยายามเขียนเป็นบทความครับ เพราะคงต้องอธิบายกันตั้งแต่เรื่อง DOM
7

อุ่ย!

ไม่ได้ต้องการละเอียดหรอกฮ่ะเอาคร่าวๆ สัก 3-4 ประโยค
ก็น่าจะมองเห็นภาพ(เป็นซีเปีย+เบลอๆ)แล้ว

แต่สงสัยจะอธิบายแบบรวบรัดให้เข้าใจยากจริงๆ

ยังไงก็ แทง ยู มิดด้าม นะครับ

------------------
แทง=Thank
ยู=You
มิดด้าม=สุดๆ
------------------
8
^