การส่ง DOM element เป็นพารามิเตอร์ของฟังก์ชัน

ในบทเรียนที่ผ่านมา เราได้ส่ง selector ของ element ต่างๆ เข้าไปในฟังก์ชันของเรา โดยฟังก์ชันเหล่านั้นจะทำการหาลิงก์เชื่อมไปยัง element เหล่านั้นภายในโค้ดของตัวเอง อย่างไรก็ตาม ยังมีวิธีอื่นอีก: เราสามารถส่งลิงก์ที่ได้มาจากการหา element ไว้ก่อนแล้วเข้าไปในฟังก์ชันได้

มาดูตัวอย่างกัน สมมติเรามีโค้ดดังต่อไปนี้:

<p id="elem1"></p>
<p id="elem2"></p>

ลองสร้างฟังก์ชัน setText ที่รับพารามิเตอร์แรกเป็นลิงก์เชื่อมไปยัง DOM element และพารามิเตอร์ที่สองเป็นข้อความที่จะใส่ใน element นั้น:

function setText(elem, text){
	elem.textContent = text;
}

มาใช้ฟังก์ชันที่เราสร้างขึ้นเพื่อตั้งค่าข้อความในย่อหน้าของเรา:

let elem1 = document.getElementById('elem1');
setText(elem1, 'text1');

let elem2 = document.getElementById('elem2');
setText(elem2, 'text2');

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

มีย่อหน้า (paragraphs) อยู่หลายอัน ให้ทำการดึงข้อมูลย่อหน้าเหล่านั้น วนลูปผ่าน แล้วแต่ละอันให้เพิ่มเครื่องหมาย '!' ต่อท้าย โดยใช้ฟังก์ชัน appendText ที่สร้างขึ้นในโจทย์ก่อนหน้า

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