Emoji rating scale from 1 to 5

 

🎯 วัตถุประสงค์ของคุณ

• เมื่อผู้ใช้ขยับ slider (input แบบ range) ซึ่งมีค่า 0 ถึง 4
• Emoji (อีโมจิ) จะเปลี่ยนตามตำแหน่งของ slider
• ตัวเลข (numb) จะแสดงเป็น 1 ถึง 5 (ไม่ใช่ 0 ถึง 4)

     
<div style="text-align: center; padding-top: 45px;">
    <input type="range" min="0" max="4" value="0" 
        oninput="
            emoji.innerText = ['🙂','😀','😄','😁','😆'][this.value];
            numb.innerText = parseInt(this.value) + 1;
        ">
    <p id="emoji" style="font-size: 45px;">🙂</p>
    <p id="numb" style="font-size: 45px;">1</p>
</div>
    

🔍 อธิบายโค้ดใหม่แบบละเอียด:

oninput="
    emoji.innerText = ['🙂','😀','😄','😁','😆'][this.value];
    numb.innerText = parseInt(this.value) + 1;
"

• this.value: ค่าจาก slider (เป็น string เช่น "0", "1", ...)
• parseInt(this.value): แปลงค่า string เป็นตัวเลข (เช่น "0" → 0)
• + 1: เพื่อให้ค่าที่แสดงเริ่มจาก 1 แทนที่จะเป็น 0
• เช่น 0 + 1 = 1, 1 + 1 = 2, ..., 4 + 1 = 5
• numb.innerText = ...: นำค่าที่คำนวณได้ไปแสดงใน <p id="numb">

 Demo: ลองเลื่อนแถบบาร์

🙂

1