Cannot set properties of undefined (setting 'color') คือ วิธีแก้ไข

ต้องการเปลี่ยนสีตัวอักษรภายในแท็ก span ของ HTML โดยใช้ภาษา JavaScript ผ่านคำสั่ง style.color โดยการเลือก หรืออ้างถึง class จากคำสั่ง document.getElementsByClassName แต่พอรันแล้วไม่สำเร็จขึ้นข้อความ Error แบบนี้ต้องแก้ไขอย่างไร

(index):6 Uncaught TypeError: Cannot set properties of undefined (setting 'color') at (index):6:57

<span class="data">jQuery</span>
<span class="data">JavaScript</span>
<span class="data">HTML&CSS</span>

<script>
    document.getElementsByClassName("data").style.color = 'red';
</script>

วิธีแก้ไข

ปัญหานี้เกิดจากคำสั่ง getElementsByClassName จะคืนเป็นกลุ่มของ elements กล่าวคือมีมากกว่า 1 elements เวลาเขียนโปรแกรมจึงต้องกำหนดลำดับของ element ที่จะทำงานด้วย เช่น

<script>
    document.getElementsByClassName("data")[0].style.color = 'red';
    document.getElementsByClassName("data")[1].style.color = 'red';
    document.getElementsByClassName("data")[2].style.color = 'red';
</script>

หรือใช้ for วนลูปตามจำนวน elements ที่พบ

<script>
    var e = document.getElementsByClassName("data");
    for( var i=0; i<e.length; i++ ) {
        e[i].style.color = 'red';
    }
</script>